Крутые советы и рекомендации по использованию Chrome DevTools

Крутые советы и рекомендации по использованию Chrome DevTools

От автора: рекомендации и советы по работе с Chrome DevTools. Использование панели «Элементы». Поиск, переход, отладка и другие доступные функции.

1. Drag-and-drop в панели Элементы

В панели «Элементы» вы можете перетащить любой HTML-элемент и изменить его положение на странице

2. Ссылка на текущий выбранный элемент в консоли

Выберите узел в панели «Элементы» и введите в консоли $0, чтобы сослаться на него. Если вы используете jQuery, вы можете ввести $($0) для доступа к API jQuery этого элемента.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

3. Используйте значение последней операции в консоли

Используйте $_ для ссылки на возвращаемое значение предыдущей операции, выполненной в консоли

4. Добавление CSS и редактирование состояние элемента

В панели «Элементы» есть две супер полезные кнопки. Первая позволяет добавить новое свойство CSS для любого выбранного вами селектора.

Второй способ позволяет запускать состояние для выбранного элемента, поэтому вы можете видеть стили, применяемые, когда элемент активен, на него наведен курсор или когда он выделен фокусом ввода.

5. Сохранение в файл измененного CSS

Нажмите имя редактируемого файла CSS. Инспектор откроет его в панели «Источники», и оттуда вы можете сохранить его со всеми изменениями, которые вы применили.

Этот прием не работает для новых селекторов, добавленных с помощью + или в свойства element.style, только для модифицированных, существующих.

6. Скриншот одного элемента

Выберите элемент и нажмите cmd-shift-p (или ctrl-shift-p в Windows), чтобы открыть контекстное меню, и выберите «Сделать снимок элемента».

7. Поиск элемента с помощью селекторов CSS

При нажатии cmd-f (ctrl-f в Windows) откроется окно поиска в панели «Элементы». Вы можете ввести любую строку, чтобы найти соответствия в исходном коде, или вы можете использовать селектор CSS, чтобы Chrome показал вам искомый элемент.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

8. Shift-enter в Консоли

Чтобы указать команды, которые охватывают несколько строк в Консоли, нажмите shift-enter. Когда вы введет то, что вам нужно, нажмите клавишу ввода в конце скрипта, чтобы выполнить его:

Вы можете очистить консоль с помощью кнопки «Очистить» в верхнем левом углу консоли или нажав ctrl-l или cmd-k.

9. Перейти к …

В панели «Источники»:

cmd-o (ctrl-o в Windows) — отображает все файлы, загруженные на вашей страницей.

cmd-shift-o (ctrl-shift-o в Windows) — отображает символы (свойства, функции, классы) в текущем файле.

ctrl-g — переход к определенной строке.

10. Просмотр выражения

Вместо того, чтобы снова и снова писать имя переменной или выражение, которое вы собираетесь проверять во время сеанса отладки, добавьте его в список просмотра выражений.

11. XHR / Fetch отладка

Из отладчика откройте панель XHR / Fetch Breakpoints. Вы можете установить прерывание в любой момент, когда задан вызов XHR / Fetch или только в определенных точках:

12. Отладка изменений DOM

Кликните на элементе правой кнопкой мыши и установите Break on Subtree Modifications. Каждый раз, когда скрипт проходит дочерние элементы этого элемента и изменяет их, отладчик автоматически останавливается, чтобы вы могли проверить, что происходит.

Я написал электронную книгу о Современной веб-разработке, которая включает разделы по React, Redux, Progressive Web Apps, ES6, ES7, ES8, Webpack, GraphQL, Babel, Service Workers, Fetch, Push Notifications и многом другом, что вам нужно знать! Получите ее сейчас!

Автор: Flavio Copes

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree