Как фронтенд-разработчик, я должен понимать, что встроенная консоль Chrome имеет очень богатые возможности и функции, которые очень полезны для нашей разработки!
1. Селектор элементов ($)
Если у вас есть опыт работы с JQuery, то да
Шаги: (1) Откройте Baidu, нажмите F12, чтобы открыть консоль.
$() эквивалентен JavaScript в
Примечание: сама
Как показано на рисунке выше, вы можете
На самом деле клавиш быстрого доступа много:
2. консоль
Я считаю, что все используют консоль больше всего, поэтому я не буду ее здесь представлять. Вы можете прочитать эту статью: "Навыки отладки JavaScript в браузерах》
3. Превратите Chrome в редактор
В Chrome мы можем превратить его в редактор всего одной командой:
4. clear()
Если вы хотите очистить консоль и память, просто сделайте это:
Вот еще несколько интересных и полезных функций:
1. Скриншот
На самом деле в хроме предусмотрена функция скриншота, но вроде только в мобильном режиме.
2. Форматирование кода
Иногда, когда мы смотрим на файлы CSS или JavaScript в Sources в консоли, мы видим кучу минимизированного кода, но просто нажмите здесь:
3. Откройте командное меню
согласно с
4. Скрыть некоторые журналы консоли
Если журналов слишком много, мы можем скрыть некоторые из журналов консоли (щелкните правой кнопкой мыши скрипт, который выводит журнал, фильтровать -> скрыть)
Также нашел хорошую документацию по Chrome Dev Tools здесь:Документация по инструментам разработчика Chrome
Это просто запись функций некоторых инструментов разработки Chrome. Если у вас есть дополнительные навыки или методы использования, оставьте сообщение в области комментариев ниже!
1. Селектор элементов ($)
Если у вас есть опыт работы с JQuery, то да
$()Конечно, не чужие, это селектор элементов, используемый для выбора элементов HTML, но сейчас мы хотим знать, что в консоли$().Шаги: (1) Откройте Baidu, нажмите F12, чтобы открыть консоль.
$() эквивалентен JavaScript в
document.querySelectorAll(), который возвращает массив (последний возвращает массивоподобный объект).Примечание: сама
$()должно бытьdocument.querySelector(), но сегодняшний тест должен вернуть набор значений для изучения.Как показано на рисунке выше, вы можете
$()[index]Возвращает элемент.На самом деле клавиш быстрого доступа много:
$ // 相当于 document.querySelector 。
? // 相当于 document.querySelectorAll 。
$_ // 返回上一个表达式的值
$0-$4 // 返回最近5个Elements面板选中的DOM元素。
dir // console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组
方向键盘的上下键
copy(content) // 将content（也可以说是content）复制到剪贴板2. консоль
Я считаю, что все используют консоль больше всего, поэтому я не буду ее здесь представлять. Вы можете прочитать эту статью: "Навыки отладки JavaScript в браузерах》
3. Превратите Chrome в редактор
В Chrome мы можем превратить его в редактор всего одной командой:
document.body.contentEditable=true4. clear()
Если вы хотите очистить консоль и память, просто сделайте это:
clear()Вот еще несколько интересных и полезных функций:
1. Скриншот
На самом деле в хроме предусмотрена функция скриншота, но вроде только в мобильном режиме.
2. Форматирование кода
Иногда, когда мы смотрим на файлы CSS или JavaScript в Sources в консоли, мы видим кучу минимизированного кода, но просто нажмите здесь:
3. Откройте командное меню
согласно с
Cmd + Shift + P(Мак) илиCtrl + Shift + P(Windows, Linux) Откройте меню команд.4. Скрыть некоторые журналы консоли
Если журналов слишком много, мы можем скрыть некоторые из журналов консоли (щелкните правой кнопкой мыши скрипт, который выводит журнал, фильтровать -> скрыть)
Также нашел хорошую документацию по Chrome Dev Tools здесь:Документация по инструментам разработчика Chrome
Это просто запись функций некоторых инструментов разработки Chrome. Если у вас есть дополнительные навыки или методы использования, оставьте сообщение в области комментариев ниже!