Я считаю, что, как老婆дизайнера детской обуви, вы должны быть знакомы с браузером Chrome.调页面,写BUG ,画样式и看php片— без этого весь мир был бы бесполезен.
Не верите? Давайте посмотрим, насколько сильны наши老婆...
При совместной отладке внутреннего интерфейса или устранении ошибок в сети вы часто слышите следующее предложение: «Вы попробуйте сделать еще один запрос и». позвольте мне посмотреть, почему произошла ошибка!
Есть смехотворно простой способ отправить запрос повторно.
Выберите Network
нажмите Fetch/XHR
выберите запрос для повторной отправки,
щелкните правой кнопкой мыши и выберите Replay XHR
Нет необходимости обновлять страницу или взаимодействовать с ней, разве это не очень круто? ! !
сценарии быстрого запуска запроса в консоли или совместной отладки или исправления ошибок для одного и того же запроса иногда необходимо изменить входные параметры и выполнить повторную инициализацию. Есть ли какой-либо ярлык?
Выберите Network
нажмите Fetch/XHR
выберите Copy as fetch
консоль выборки», вставьте код
для изменения параметров и нажмите Enter, чтобы завершить.
Раньше я всегда решал эту проблему, изменяя код или записывая fetch вручную. Было действительно глупо думать об этом...
Если ваш код вычисляется, он выводит сложный объект . и его нужно скопировать и отправить другим Люди, что мне делать?
Используйте функцию copy для выполнения对象в качестве входного параметра.
Раньше я всегда выводил его на консоль через JSON.stringify(fetfishObj, null, 2) , а затем вручную копировал и вставлял. Это было действительно неэффективно...
при отладке веб-страницы. После выбора элемента на панели Elements что, если вы хотите узнать некоторые его атрибуты, такие как宽,高,位置и т. д., через JS ?
Выберите элемент для отладки через Elements
и получите доступ к консоли напрямую с помощью $0
Иногда нам может потребоваться сделать снимок экрана веб-страницы. Можно сделать встроенные снимки экрана или снимки экрана WeChat, но это необходимо для захвата содержимого, превышающего его. один экран. Что делать ?
Подготовьте контент, который необходимо снять.
cmd + shift + p Выполните команду Command
, введите Capture full size screenshot и нажмите Enter.
Что делать, если вы хотите перехватить некоторые выбранные элементы?
Ответ также очень прост. На третьем шаге введите Capture node screenshot
. При отладке элементов вы часто расширяете их один за другим, чтобы отладить их, когда уровень относительно глубокий? Есть более быстрый способ
зажать клавишу opt + клик (самый внешний элемент, который нужно развернуть)
, чтобы увидеть этот сценарий. Думаю, вы с этим сталкивались. Для определенной строки были выполнены различные процессы, а затем мы хотим узнать результаты каждого этапа выполнения. Что нам делать? .
'fatfish'.split('').reverse().join('') // hsiftaf, вы можете сделать это
// Шаг 1 'fatfish'.split('') // ['f', 'a ', 'т', 'ф', 'я', 'с', 'ч']
// Шаг 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'ф', 'т', 'а', 'ф']
// Шаг 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf 
Более простой способ —
использовать $_ для ссылки на результат предыдущей операции, не копируя его каждый раз
// Шаг 1 'fatfish'.split('') // ['f', 'a', 't', ' рыба']
// Шаг 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// Шаг 3 $_.join('') // hsiftaf
Некоторым учащимся нравится белая тема Chrome, а некоторым — черная. Мы можем использовать сочетания клавиш для быстрого переключения между двумя темами.
cmd + shift + p выполните команду Command
и введите Switch to dark theme или Switch to light theme чтобы переключить тему.
$ " и " $$ "являются наиболее частым требованием для использования document.querySelector и document.querySelectorAll на консоли для выбора элементов текущей страницы, но на самом деле они слишком длинные. Мы можем использовать $ и $$ заменитель.
$i Установите пакет npm прямо в консоли.Вы когда-нибудь сталкивались с таким сценарием? Иногда мне хочется использовать такой API , как dayjs или lodash , но не хочется заходить на официальный сайт, чтобы его проверить. Было бы неплохо, если бы я мог опробовать его прямо на консоли.
Console Importer — это такой плагин, используемый для установки пакетов npm непосредственно в консоль.
Установите плагин Console Importer
$i('name'), чтобы установить пакет npm.
. Предположим, есть следующий код. Мы надеемся, что точка останова сработает, когда имя еды будет ? как мы можем это сделать?
константные продукты = [
{
имя: '?',
цена: 10
},
{
имя: '?',
Цена: 15
},
{
имя: '?',
Цена: 20
},
]
food.forEach((v) => {
console.log(v.name, v.price)
}) Это очень удобно при использовании большого количества данных и позволяет нарушить условие только тогда, когда условие выполнено. Представьте себе, если нет условных точек останова, нам нужно нажать отладчик n раз?
(Обучающее видео: разработка веб-интерфейса, видео по основам программирования).
Выше приведены подробные сведения об 11 навыках отладки Chrome, которые могут повысить эффективность. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!