Я полагаю, что вы должны быть знакомы с браузером Chrome, так как это ближайший партнер разработчиков интерфейса. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript. В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки. Давайте посмотрим. В нашей работе нам часто приходится отлаживать интерфейс с back-end разработчиками. Использование этой функции может повысить эффективность нашей стыковки. Вам просто нужно сделать эти шаги: Выберите вкладку Network НажмитеFetch/XHR Выберите запрос, который хотите отправить повторно Щелкните правой кнопкой мыши и выберитеReplay XHR Для одного и того же запроса иногда необходимо изменить входные параметры и отправить их повторно. Как это сделать с минимальными усилиями? Вам просто нужно сделать эти шаги: Выберите вкладку Network. Щелкните Fetch/XHR. Выберите запрос, который хотите отправить повторно. Выберите Copy затем Copy as fetch. Измените входной параметр и отправьте его повторно. Это потрясающе. Вы можете скопировать сложные данные находящиеся в переменных, используя функциюCopy, предоставляемую браузером Chrome. Примечание переводчика: также можно копировать JSON-объекты возвращаемые сервером (на вкладке Network -> Preview) если нажать правую кнопку мыши и copy object Как мы можем вывести в консоль некоторые атрибуты (такие как ширина, высота, положение и т. д.) элемента DOM выбранного через панель «Элементы»? Выберите элемент DOM через вкладку Elements. Напишите в консоли $0для доступа к элементу Если мы хотим сделать скриншот всей страницы, состоящей из более чем одного экрана, браузер Chrome может сделать это легко? Подготовьте содержимое страницы, которую вы хотите захватить Откройте средства разработчика и нажмите комбинацию клавиш - на Windows/Unix Ctrl + Shift + P на MacOS CMD + Shift + P откроется консольCommand Введите Сделать полноразмерный скриншот (если язык ОС английский, то Capture full size screenshot ) и нажмите Enter Ух ты, круто! А если мы хотим сделать скриншот части страницы, что нам делать? Это также очень просто, просто введите «Сделать скриншот узла» (Capture node screenshot если ОС на англ.языке) на третьем шаге: Как развернуть все дочерние узлы элемента DOM одновременно, не выбирая их по одному? Вы можете использовать комбинацию клавиш «Alt + клик» на вкладке «Elements», чтобы развернуть все дочерние узлы сразу. Давайте посмотрим на эту сцену: мы выполнили различные операции над строкой, а затем мы хотим узнать результат каждого шага, что нам делать? Вы можете сделать что-то вроде этого Более простой способ: Используйте $ чтобы получить результат последней операции Кому-то нравится белая тема Chrome, а кому-то черная. Мы можем использовать сочетания клавиш для быстрого переключения между двумя темами. cmd + shift + pвыполнить командную команду Введите «Переключиться на темную тему» ​​или «Переключиться на светлую тему», чтобы переключить тему. Примечание от переводчика: светлая тема хороша когда на экран попадает много яркого света, например если Вы работаете на пляже в солнечный день Использование document.querySelector и document.querySelectorAllдля выбора элементов текущей страницы в консоли является наиболее распространенным способом, но это слишком длинно, и мы можем использовать $ и $$ вместо этого (даже если на страницу не подключен JQuery): Иногда я хочу использовать NPM-пакеты такие, как dayjsили lodash, но я не хочу заходить на официальный сайт, чтобы проверить это. Было бы неплохо, если бы мы могли попробовать это прямо на консоли, и мы можем! Установите плагин импорта консоли $i('имя') установить пакет npm Мы хотим приостановить выполнение кода, когда при переборе объекта столкнёмся с едой, которая называется 🍫 Как это сделать? А вот как: В случае больших объемов данных использование условных точек останова будет очень полезно для разработки и значительно повысит эффективность! Берите на вооружение. От переводчика: я случайно наткнулся на эту статью, и счёл её полезной для себя. Очень рад, если этот перевод кому то оказался полезным 🤠 full-stack разработчик, team-lead, наставник