Первоначальный адрес: https://coolshell.cn/articles/17634.html/comment-page-1 “комментарии” Инструмент разработчика Chrome-очень мощная вещь. Я считаю, что программисты не незнакомы с этим. Однако некоторые небольшие функции могут быть неизвестны широкой публике. Итак, запишите эту статью, чтобы перечислить функции, о которых вы, возможно, не знаете. Некоторые функции могут быть более практичными, некоторые-нет. Вы можете добавлять и обмениваться.
Если ты не будешь много говорить, давай начнем.
Форматирование кода Большое количество кода CSS/JS будет уменьшено до минимума. Вы можете нажать на тег {} в левом нижнем углу окна кода, и chrome поможет вам отформатировать его.
Принудительное состояние DOM Некоторые HTML-DOM являются статусными, например теги, которые будут иметь активные, наведенные, сфокусированные, посещенные состояния. Иногда наш CSS отключает стили разных состояний. При анализе стилей CSS DOM на веб-страницах мы можем нажать кнопку: HOV в стиле CSS, чтобы изменить состояние DOM.
анимация Теперь на веб-странице появились некоторые анимационные эффекты. В инструментах разработчика Chrome откройте соответствующие вкладки с помощью дополнительных инструментов = > анимация в правом верхнем меню. Таким образом, вы можете воспроизводить анимацию в замедленном режиме (вы можете нажать 25% или 10%), а затем chrome может помочь вам записать анимацию, вы можете снова запустить процесс перемещения и рисования и даже внести некоторые простые изменения.
Отредактируйте веб-страницу напрямую Введите следующую команду в своей консоли:
1 документ.Режим дизайна, чтобы вы могли напрямую изменять содержимое веб-страницы.
Пример того, как очистить консоль, также показан на следующем скриншоте P.S. Вы можете ввести очистить () или нажать Ctrl + L (под Windows), CMD + K (под MAC)
Ограничение скорости сети Вы можете установить скорость доступа к вашей сети, чтобы имитировать медленную сеть.
Копировать HTTP-запрос Эта функция мне очень нравится. Вы можете нажать XHR на вкладке сеть, чтобы отфильтровать соответствующие запросы Ajax, затем щелкнуть правой кнопкой мыши соответствующие запросы и выбрать в меню Копировать = > копировать как завиток. Затем вы можете перейти в свою командную строку, чтобы выполнить команду curl. Легко провести автоматизированное тестирование.
Дружеский совет: эта операция может скопировать вашу личную информацию о конфиденциальности, такую как файлы cookie, после вашего личного входа в систему.
Сделайте снимок с помощью мобильного телефона, Это может быть немного скучно, но я думаю, что это интересно.
На дисплее устройства сначала выберите мобильный телефон, затем выберите Показать рамку устройства в правом верхнем углу, затем вы увидите внешний вид мобильного телефона, а затем выберите сделать снимок в этом окне, и вы можете сделать следующий снимок экрана с внешним видом мобильного телефона.
Картинка, которую я схватил, выглядит следующим образом (конечно, не все мобильные телефоны имеют рамку)
Установка точек останова В дополнение к настройке отладки точек останова в исходном коде javascript вы также можете:
Установите точки останова для DOM Выберите DOM и выберите пункт “Прервать” в контекстном меню. Вы можете увидеть следующие три варианта:
Установите точки останова для XHR и прослушивателя событий На странице источники вы можете увидеть пакет точек останова справа. В дополнение к настройке точек останова для DOM, как упоминалось выше, вы также можете установить точки останова для XHR и прослушивателя событий, как показано ниже:
Советы по работе с консольным DOM Chrome помогут вам буферизировать 5 просмотренных объектов DOM. Вы можете получить к ним доступ непосредственно в консоли с помощью $0, $1, $2, $3, $4. Вы также можете использовать синтаксис, подобный jQuery, для получения объектов DOM, таких как $(“ාmydiv”) Вы также можете использовать $$(“. Класс”), чтобы выбрать все объекты DOM, соответствующие критериям. Вы можете использовать geteventlisteners ($(“селектор”) для просмотра событий в объекте DOM (как показано на следующем рисунке).
Вы также можете использовать мониторинг событий ($(“селектор”) ) для мониторинга связанных событий. Например: 1 События мониторинга(документ.тело, “щелчок”);
Некоторые функции в консоли 1) функция мониторинга
Используйте функцию монитора для мониторинга функции, как показано в следующем примере
2) функция копирования
Функция копирования копирует значение переменной в буфер обмена.
3) функция контроля
Функция проверки позволяет вашей консоли перейти к объекту, который вы хотите просмотреть. Такие как:
Для получения дополнительных функций, пожалуйста, обратитесь к официальному документу – с помощью ссылки на консоль/командную строку
Вывод из консоли Мы знаем, что в дополнение к console.log существуют также console.debug, console.info, консоль.предупреждение, консоль.ошибка, которые являются различными уровнями вывода. Еще одна малоизвестная функция заключается в том, что в console.log вы также можете добавить стиль CSS в выходной текст, как показано ниже:
1 Консоль.журнал (“% C левое ухо”, “размер шрифта: 90 пикселей; цвет:”)
Затем вы можете определить некоторые связанные функции журнала, такие как:
1 2 3 4 5 6 console.todo( msg){ console.log( ‘%c%s %s %s’, ‘размер шрифта:20 пикселей; цвет:желтый; цвет фона: синий;’,’ -‘, msg,’ -‘);} console.важно( msg){ console.log( ‘%c%s %s %s’, ‘размер шрифта:20 пикселей; цвет:коричневый; шрифт: жирный; оформление текста: подчеркивание;’,’–’, msg,’–’);}
Для форматирования в console.log, пожалуйста, обратитесь к следующей таблице:
Вывод индикатора в формате %S выводит строковую переменную. %I или% d форматирует значение целочисленной переменной. %F форматирует значение переменной с плавающей запятой. Формат %O для вывода объекта DOM. Формат %O для вывода объекта JavaScript. %C добавьте стиль CSS в следующую строку
В дополнение к печати console.log массива JS, вы также можете использовать console.table для печати, как показано ниже:
1 2 3 4 5 6 7 вар домашние животные = [ { животное: “Лошадь”, имя: “Пони”, возраст: 23 }, { животное: “Собака”, имя: “Снупи”, возраст: 13 }, { животное: “Кошка”, имя: “Том”, возраст: 18 }, { животное: “Мышь”, имя: “Джерри”, возраст: 12} ]; консоль.таблица(домашние животные)
Об объектах консоли В дополнение к функции журнала, описанной выше, объект консоли имеет множество функций, таких как: Консоль. Trace() может распечатать стек вызовов функций консоли JS. Время () и консоль. Функция Time end () может помочь вам рассчитать время, затраченное между фрагментами кода. Приставка. Профиль () и консоль. Профиль и () позволяют вам видеть потребление процессора. Приставка. Функция Count () позволяет увидеть, сколько раз в данный момент печатается один и тот же журнал. Console.assert (выражение, объект) позволяет утверждать выражение, все это можно увидеть в документации API консоли Google.
На самом деле, есть много других вещей, вы можете обратиться к официальному документу Google – chrome devtools
О ярлыках Нажмите на три жесткие точки в правом верхнем углу devtools, и вы увидите меню. Нажмите сочетание клавиш, и вы увидите все сочетания клавиш
Если вы знаете больше, пожалуйста, добавьте!
(конец статьи)