Предыдущая статьяJavaScript отладки двух быстрых советов, некоторые друзья-копатели оставили сообщение о том, что они еще не доработаны, так что давайте поговорим о некоторых других навыках 🐶
Если вы фронтенд-разработчик, ваше время в браузере может занимать половину вашего рабочего времени или больше. Тогда мы рекомендуем вам использовать Google Chrome, который является одним из инструментов для фронтенд-разработки 🚀
Прежде чем открывать вопрос, пожалуйста, обновите версию Google Chrome до последней.
На момент публикации этой статьи, мой дорогойwindowВ Google Chrome для последней версии -Версия 85.0.4183.121 (официальный выпуск) (64-разрядная версия),macВ Google Chrome для последней версии -Version 85.0.4183.121 (Official Build) (64-bit)
В: Зачем обновлять?
О: Во-первых, нужно объяснить работу единым образом, во-вторых, обновления продукта всегда решат некоторые оставшиеся проблемы, и технология будет смотреть вперед.
Заинтересованные партнеры могут проверить запись обновлений на официальном сайте.google web
Сразу переходите к теме ниже 💓
Следующие операции находятся вmacв Google Chrome.windowВышеупомянутое похоже, пожалуйста, решите сами~
1. Разрешить повторяющиеся объявленияletа такжеclass
До обновленной версии мы использовали на Google ChromeletилиclassСообщение об ошибке появится, если переменная объявлена дважды. следующим образом:
let i = "jia"
let i = "reng"
// 报错
// Uncaught SyntaxError: Identifier 'i' has aready been declared
Панель навигации => Дополнительные значки => Настройки => О Chrome => Обновить
После обновления повторное объявление не сообщит об ошибке, которая решается в панели управленияconsoleРаздражение, связанное с тем, что при отладке одна и та же переменная не перезаписывается.
2. Фильтровать запросы
Веб-страница запрашивает сервер.Иногда запросов слишком много, и мы хотим знать, какие запросы заблокированы. Мы можем отфильтровать запрошенную сеть, чтобы найти проблему.
Панель управления => Сеть => значок фильтра => is:running => обновить отслеживаемую страницу
3. Разверните все дочерние узлы
в ходе выполненияDOMПри отладке элементов узла нам нужно развернуть и просмотреть каждый узел.Если мы просто нажмем на подэлементы под целевым элементом один за другим, чтобы развернуться, это займет время. Вы можете попробовать следующие ярлыки ~
Панель управления => Элементы => Нажмите кнопку + щелкните значок элемента, который вы хотите развернуть.
4. Прокручивайте элементы в поле зрения
отладкаDOMэлемент, мы сосредоточились на соответствующихDOMСтруктура поднята, но соответствующий элемент не отображается в видимом окне, поэтому мы можем быстро прокрутить его до видимого окна.
Панель управления => Элементы => Щелкните правой кнопкой мыши на выбранном узле DOM => Прокрутите до вида.
5. Устройство по умолчанию
Когда дело доходит до отладки, у нас не так много оборудования под рукой. особенно для мобильныхобезьяна, в отсутствие достаточного количества отладочных машин мы полагаемся на инструменты отладки для моделирования. Ну, в дополнение к нескольким значениям для устройства Google Chrome по умолчанию, напримерiPhone X, iPad. Мы также можем настроить необходимое оборудование.
Панель управления => значок настройки => Устройства => Добавить пользовательское устройство...
Мы добавляем размер300 * 800а такжеDPRдля3устройство из.
После этого при отладке устройства мы можем выбрать предустановленное устройство для предварительного просмотра~
6. Статус сети по умолчанию
Мы не можем контролировать скорость загрузки по сети пользователей, использующих наш продукт, поэтому нам необходимо смоделировать производительность продукта при различных скоростях сети, чтобы проверить, соответствует ли наша оптимизация продукта ожидаемому эффекту. Точно так же мы можем настроить статус сети.Как правило, по умолчаниюonline.
Панель управления => значок настройки => Дросселирование => Добавить пользовательский профиль...
7. Делайте снимки
communicationОдин из принципов душевного спокойствия и усилий:Общайтесь с помощью картинок и текстов. При общении с вышестоящим и низшим персоналом, по пути ознакомления с товаром, обязательно нужно сделать скриншот товара.
Как разработчик, вы все еще работаете с инструментами для скриншотов или чата? У нас есть более удобное решение~
7.1 Захват полноэкранных снимков
панель управления => команда + Shift + p => сделать снимок экрана в полном размере
Вот перехват собственных самородковстраница профилякартинка. После входа на страницу профиля установите его на отладку мобильного устройства, а затем выполните указанные выше действия в консоли.capture full size screenshotдля создания полного изображения страницы профиля.
⚠️ Мобильная отладка не ограничена, ее можно делать и на ПК, для удобства стикеров выбираем только мобильную отладку.
Конечно, мы чаще используем частичные скриншоты, поэтому воспользуемся следующими советами.
7.2 Захват частичный снимок
панель управления => проверить элемент => команда + Shift + p => сделать скриншот узла
Я выбираю профиль NuggetsРаздел аватарСделайте пример скриншота~
После правильной работы перехваченный элемент является целевым элементом аудита, как показано ниже:
8. Быстро очистить кеш сайта
Иногда для разработки и отладки нам необходимо очистить информацию кеша. Вместо того, чтобы вручную очищать информацию одну за другой, лучше очистить информацию этого сайта за один шаг 💨
панель управления => command + shift + p => очистить данные сайта
Хм~ Давай остановимся, я уже много написал~
подожди, простовосемь советовВот и все, надо добавить 🐱
Because NINE is my lucky number.
9. Измените тему панели отладки
При разработке и отладке тема по умолчанию неизбежно утомляет глаза. Более того, как разработчик, вы должны быть крутым, крутым, крутым... темным и черным. Следуя приведенным ниже шагам, вы сможете выбрать стиль, который вам подходит.
Панель управления => значок настроек => Настройки => Внешний вид => Тема
【над】
Больше контента можно найти наjimmy - blogВид ε=ε=ε=┏(゜ロ゜;)┛