Я новичок во фронтенде, еще не прошедший период стажировки, за последние несколько месяцев я открыл для себя очень простые в использовании небольшие функции и мелкие детали Google Chrome Devtools и специально поделился ими с вами. Добро пожаловать в избранное + нравится. Новичкам нужна поддержка, ха-ха
Содержание и изображения являются оригинальными и не могут быть воспроизведены без разрешения! !
Element
1. Плавающее имя стиля в стилях может подсвечивать все элементы, соответствующие названию стиля (как показано на рисунке)
Эта функция довольно полезна. Подходит для проверки того, какие элементы используются стили, которые вы написали. Легко посмотреть, являются ли стили противоречивыми
2. Уровень быстрого регулировки (рис.)
совет: вы можете настроить значение стиля с помощью клавиш со стрелками вверх и вниз, больше не нужно гадать
3. Для цвета шрифта, цвета фона и т. д., которым необходимо использовать значение цвета, вы можете напрямую выбрать или изменить цвет в консоли (как показано на рисунке).
Это может не только вручную выбрать цвет, но и снова выбрать цвет других элементов на веб-странице.
4. Используйте инструменты для имитации операций серии css (как показано на рисунке)
Это более интересно.... Есть несколько стилей наведения мыши, а мыши нет. Что касается проблемы невозможности сохранения сохраненных стилей, это все еще очень просто. и прост в обращении
5. Написание графической CSS-анимации (на фото)
Я не использовал его специально... потому что я редко пишу анимацию... но кажется, что кривую движения можно отрегулировать графически. интереснее
6. Написание теневой графики CSS
Это может графически настроить смещение XY, размытие и распространение тени.
7. Быстро просмотреть информацию о выбранном элементе (как показано на рисунке)
Это немного интересно Когда вы раньше занимались каким-то бизнесом, вам во многих случаях нужно было console.log элементы. Посмотрите его свойства. Вы также можете увидеть дочерние элементы, высоту и т. д. выбранного элемента.
Console
1. Фильтр содержимого вывода
Это может быстро ввести ключевые слова, чтобы найти нужную консоль. Поддерживать ли регулярную самопроверку
2. Фильтрация по приоритету консоли
Это может быстро отфильтровать приоритет консоли и увидеть информацию об отладке, которую вы хотите видеть.
3. Другие инструменты в консоли
Это включает в себя «информацию об отладке с отметкой времени», «отображение статуса запроса XMLHttpRequests» и так далее. Пожалуйста, проверьте себя
Network
Навык
Это включает в себя ряд функций, таких как «скрыть ссылку на маленькое изображение в начале данных», «включить автономный режим», «ограничить задержку ограничением скорости страницы» и т. д.
Vue DevTools (пожалуйста, пропустите для других разработчиков фреймворка)
1. Быстро определить положение относительного позиционирования и положение дерева dom компонента
Нечего сказать
2. Быстро просмотрите имя компонента элемента и найдите позицию в дереве компонентов.
Как показано
Security
Виден домен всех запросов с момента загрузки страницы (не hosts, исправьте пожалуйста)
больше инструментов
Пожалуйста, найдите картинку, я хочу начать кашлять кашлять
Animations
Откройте этот компонент, и анимация страницы будет отображаться, как показано на рисунке, после запуска анимации страницы. Вы можете контролировать скорость анимации, блокировать воспроизведение анимации и вручную тянуть анимацию для замедленного воспроизведения.
Change
Это очень полезно ах ах ах ах ах ах ах. Особенно после того, как вы измените css на странице, вы забудете, какие из них были изменены, когда вы вернетесь... Этот инструмент может видеть все ваши временные ручные изменения с момента загрузки страницы.
Network conditions
1. Основные операции
Функция, как показано
2. Ограничьте текущую страницу (используйте системные предустановки)
Я верю, что каждый может это понять... Мне не нужно говорить это...
3. Ограничьте поток страниц (используйте пользовательский)
После нажатия «Добавить» на предыдущем изображении нажмите «Добавить пользовательский профиль» на изображении в этой главе, и появится ситуация, показанная на рисунке выше. Отрегулируйте в соответствии с реальной ситуацией ~~
Quick source
Напишите код здесь, и он вступит в силу при написании~~~
Rendering
Здесь самое место для различных мониторов, в том числе мониторов частоты кадров в секунду.
Необходим для разработки HTML5/мобильных игр~~Вы можете видеть FPS и использование памяти графического процессора в режиме реального времени~~
Search
Входное содержимое, глобальный поиск (все загруженное содержимое файла)
Sensors
Это может имитировать текущее положение устройства, а также моделировать параметры датчика уровня мобильного телефона. Просто перетащите телефон на картинку