Предисловие

Я полагаю, что вы должны быть знакомы с браузером Chrome, так как это ближайший партнер разработчиков интерфейса. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.

В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки.

Давайте посмотрим.

1. Повторно отправить запрос XHR

В нашей работе нам часто приходится отлаживать интерфейс с back-end разработчиками. Использование этой функции может повысить эффективность нашей стыковки.

Вам просто нужно сделать эти шаги:

  1. Выберите вкладку Network

  2. НажмитеFetch/XHR

  3. Выберите запрос, который хотите отправить повторно

  4. Щелкните правой кнопкой мыши и выберитеReplay XHR

2. Быстро отправлять запросы в консоли

Для одного и того же запроса иногда необходимо изменить входные параметры и отправить их повторно. Как это сделать с минимальными усилиями?

Вам просто нужно сделать эти шаги:

  1. Выберите вкладку Network.

  2. Щелкните Fetch/XHR.

  3. Выберите запрос, который хотите отправить повторно.

  4. Выберите Copy затем Copy as fetch.

  5. Измените входной параметр и отправьте его повторно.

3. Переменные JavaScript можно копировать

Это потрясающе. Вы можете скопировать сложные данные находящиеся в переменных, используя функциюCopy, предоставляемую браузером Chrome.

Примечание переводчика: также можно копировать JSON-объекты возвращаемые сервером (на вкладке Network -> Preview) если нажать правую кнопку мыши и copy object

4. Получить выбранный элемент DOM в консоли

Как мы можем вывести в консоль некоторые атрибуты (такие как ширина, высота, положение и т. д.) элемента DOM выбранного через панель «Элементы»?

  1. Выберите элемент DOM через вкладку Elements.

  2. Напишите в консоли $0для доступа к элементу

5. Делайте полноразмерные скриншоты

Если мы хотим сделать скриншот всей страницы, состоящей из более чем одного экрана, браузер Chrome может сделать это легко?

  1. Подготовьте содержимое страницы, которую вы хотите захватить

  2. Откройте средства разработчика и нажмите комбинацию клавиш - на Windows/Unix Ctrl + Shift + P на MacOS CMD + Shift + P откроется консольCommand

  3. Введите Сделать полноразмерный скриншот (если язык ОС английский, то Capture full size screenshot ) и нажмите Enter

Ух ты, круто!

А если мы хотим сделать скриншот части страницы, что нам делать?

Это также очень просто, просто введите «Сделать скриншот узла» (Capture node screenshot если ОС на англ.языке) на третьем шаге:

6. Разверните все дочерние узлы

Как развернуть все дочерние узлы элемента DOM одновременно, не выбирая их по одному? Вы можете использовать комбинацию клавиш «Alt + клик» на вкладке «Elements», чтобы развернуть все дочерние узлы сразу.

7. Используйте «$» для ссылки на результат последнего выполнения.

Давайте посмотрим на эту сцену: мы выполнили различные операции над строкой, а затем мы хотим узнать результат каждого шага, что нам делать?

'fatfish'.split('').reverse().join('') // hsiftaf

Вы можете сделать что-то вроде этого

// шаг 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// шаг 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// шаг 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

Более простой способ:

Используйте $ чтобы получить результат последней операции

// шаг 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// шаг 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// шаг 3
$_.join('') // hsiftaf

8. Быстро переключайте цвета темы

Кому-то нравится белая тема Chrome, а кому-то черная. Мы можем использовать сочетания клавиш для быстрого переключения между двумя темами.

  1. cmd + shift + pвыполнить командную команду

  2. Введите «Переключиться на темную тему» ​​или «Переключиться на светлую тему», чтобы переключить тему.

Примечание от переводчика: светлая тема хороша когда на экран попадает много яркого света, например если Вы работаете на пляже в солнечный день

9. Используйте $ и $$ для быстрого выбора элементов DOM

Использование document.querySelector и document.querySelectorAllдля выбора элементов текущей страницы в консоли является наиболее распространенным способом, но это слишком длинно, и мы можем использовать $ и $$ вместо этого (даже если на страницу не подключен JQuery):

10. Используйте $I, чтобы установить пакет npm в консоли.

Иногда я хочу использовать NPM-пакеты такие, как dayjsили lodash, но я не хочу заходить на официальный сайт, чтобы проверить это. Было бы неплохо, если бы мы могли попробовать это прямо на консоли, и мы можем!

  1. Установите плагин импорта консоли

  2. $i('имя') установить пакет npm

11. Добавьте условную точку останова

Мы хотим приостановить выполнение кода, когда при переборе объекта столкнёмся с едой, которая называется ???? Как это сделать?

const foods = [
  {
    name: '????',
    price: 10
  },
  {
    name: '????',
    price: 15
  },
  {
    name: '????',
    price: 20
  },
]
foods.forEach((v) => {
  // debugger
  console.log(v.name, v.price)
})

А вот как:

В случае больших объемов данных использование условных точек останова будет очень полезно для разработки и значительно повысит эффективность! Берите на вооружение.

Спасибо за внимание!

От переводчика: я случайно наткнулся на эту статью, и счёл её полезной для себя. Очень рад, если этот перевод кому то оказался полезным ????

Комментарии (17)


  1. Kuch
    01.05.2022 14:08

    Вот тут есть многое и даже больше

    https://youtu.be/zzkX1LQPddk


  1. Aleksandr-JS-Developer
    01.05.2022 14:53
    +1

    Прикол с npm - огонь


  1. shornikov
    01.05.2022 20:09
    +1

    Не сказать что всё, но были важные откровения. Спасибо


    1. Rikkster Автор
      01.05.2022 20:12

      Инструменты разработчика Chrome и правда очень богатый функционалом инструмент, здесь автор рассмотрел лишь 11 приёмов, некоторые из них не сильно известны, тоже взял на вооружение ????


      1. shornikov
        01.05.2022 20:18
        +1

        Более базовые - мусолено-перемусолено. Наверняка, все это есть в whats new - но кто их читает)


        1. Rikkster Автор
          01.05.2022 21:41

          Кстати я изредка читаю Whats new обновлений VSCode и периодически нахожу там что то действительно интересное


  1. Alex-111
    02.05.2022 06:54
    +9

    Такая глупенькая кликбэйтовость заголовка "помогут Вам стать Senior". Будто у людей "стать Senior" - это самоцель и они читают статьи только явно направленные на это =) Можно же было сказать "упростят процесс отладки", например.


    1. Rikkster Автор
      02.05.2022 11:46
      +1

      В данном случае я цитирую автора дословно ????


  1. Ionenice
    02.05.2022 09:33
    +1

    Хрому понадобилось столько лет, чтобы добавить банальный replay. Никогда не понимал chrome, как браузер для разработки, сколько не пытался, всегда были проблемы с кешем, в не зависимости от disable cache, постоянно не хватало resend в два клика, но 60% рынка…


    1. arheo_pterix
      02.05.2022 14:28

      AuFthor to drink poison gatorade  !


  1. TonyKentnarEarth
    02.05.2022 14:28

    Имхо, firefox developer edition умеет все тоже самое только лучше


    1. Rikkster Автор
      02.05.2022 14:28

      Поделитесь, а в чём выражается это "Лучше"?


      1. TonyKentnarEarth
        02.05.2022 18:26

        Например скриншотить можно конкретный html контейнер сразу, без необходимости потом обрезать
        Или повторно отправлять запрос можно с изменением параметров/тела запроса


        1. skrikl
          03.05.2022 02:14

          Например попап расширения отлаживать в ФФ - верный путь к дев дзену


        1. Hallfire
          04.05.2022 09:34

          так в статье, вроде, как раз эти возможности также приведены:

          скриншотить можно конкретный html контейнер сразу

          пункт 5 последний абзац/картинка
          + то же самое можно просто из контекстного меню нужного узла вызвать

          повторно отправлять запрос можно с изменением параметров/тела запроса

          пункт 2


  1. SoulSol
    02.05.2022 14:28

    Спасибо за информацию.


  1. iMiKED
    04.05.2022 07:21

    В Chrome функция переотправки запроса с изменением параметров реализована, конечно, крайне убого. В FireFox в разы удобнее, именно поэтому приходится юзать дев-консоль для FF для таких кейсов(