Разработчики Chrome используют различные трюки

внешний интерфейс JavaScript CSS

Для каждого фронтенд-практика, помимо клавиши F5, чаще всего используется клавиша F12.

Сегодня великий бог (@小鱼二) порекомендовал мне веб-сайт только для того, чтобы узнать, что в хроме есть все виды шоу-поз.

Сайт:umaar.com/dev-tips/

Я прочитал их все, и вот лишь несколько человек, о которых я не знал раньше, я думаю, что это очень полезно.

1. Вас когда-нибудь беспокоили псевдостили онлайн-тюнинга?



2. Быстро расположите исходный код до определенной строки! Ctrl + р



3. Когда совместный интерфейс отладки дает сбой, вы хотите реагировать?



4. Вы также расширяете дом слой за слоем? Alt + клик



5. Вы обращались к точке прерывания, когда сообщалось об ошибке?



6. Часто ли вы забываете, куда привязывать события?



7. Нужно ли менять код, когда ломаешь точку?



8. Самый интуитивный способ увидеть иерархию DOM?



9. Проверьте некоторые конкретные запросы, вы использовали фильтры?



10. Неудобно ли настраивать структуру дома в панели Elements?



11. Хотите узнать, где находится код для загрузки картинки? Инициатор! !



12. Больше не хотите загружать файл?




Я не буду перечислять слишком много, вы можете посмотреть на сайте в начале. Я увидел, что есть несколько функций, которых нет на моем компьютере (win10), это должно быть связано с версией chrome.

Функций инструментов разработчика действительно много, а иногда они вообще не используются, официальный туториал на сайте рекомендует ознакомиться каждому фронтендеру:

Developers.Google.com/Web/tools/From…

Китайская версия:

Ууху. CSS88.com/doc/chrome-…


======================

Пополнить:

В комментариях много людей спрашивают, что такое программа для создания гифок.

Я искал, должно бытьwww.techsmith.com/, судя по описанию, значит софт слишком профессиональный. .

Но я использовал два небольших программного обеспечения, которые очень хороши и очень просты в использовании:

Эффект следующий:


Эта статья закончилась.