Хитрости инструмента отладки Chrome, о которых вы не знали

внешний интерфейс Chrome
Хитрости инструмента отладки Chrome, о которых вы не знали

специальное заявление

Эта статья является авторомТомек СулковскиОпубликовано вmediumряд выше. По словам автора, всего 24 статьи, которые обновлены до 24 декабря.
Авторские права принадлежат оригинальному автору.

Автор рекомендует наш китайский перевод в Твиттере, скриншот в конце

Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать вашему чтению,Авторизованные записи здесь

текст

За 24 дня до праздников я опубликую серию коротких статей о том, как более интересно использовать инструменты разработки,вчерамы начинаем пониматьDrawer, сегодня взгляните на интересный набор инструментов, спрятанных здесь.

52. Управление датчиками

Если вы используете какое-то местоположение в своем приложенииAPIИ чтобы проверить это, вы, вероятно, не захотите объехать весь мир только для того, чтобы сделать это (потому что есть более весомые причины путешествовать 😉).

родыDrawerизДатчикиПанели позволяют моделировать определенные локации. Вы можете выбрать одно из предопределенных местоположений, добавить свое собственное или просто ввести широту/долготу вручную. Выбранное значение будетnavigator.geolocation.watchPosition(или.getCurrentPosition)Отчет.

Если ваше приложение использует акселерометр, сенсорная панель также может имитировать устройство в3Dрасположение в космосе!

53.Смоделируйте сетевые условия

Точно так же, как подделка вашего местоположения, вы можете использоватьDrawerизNetwork conditionsПанель имитирует специфическое сетевое поведение: имитирует Интернет как типичный3GСеть даже офлайн! Это помогает узнать размер ресурса страницы.

Или протестируйте автономную функциональность вашего приложения.

Network conditionsПанели также могут эмулировать определенные пользовательские агенты.

54. Держите источник под рукой

Аналогично мониторингу при открытии разных панелейConsoleаналогичным образом, например, когда я в основном сосредотачиваюсь наElementsПанель, иногда тоже хочется посмотреть исходный код. подобноdrawer consoleто же самое, ты можешьdrawerпоказать вSource.

Как видите, это не“主”SourceПрибамбасы панели такие как нетcall stackилиcontrol ( pause, step overи т. д.). Если точка останова сработает, она не появится вdrawerизQuick sources, но отображается в основномSourceсередина.

Но он по-прежнему полезен для быстрого просмотра кода или установки точек останова.

Сегодняшняя подборка здесь~

Рутина: Если вы узнали что-то новое здесь

→ Можешь поставить лайк и уйти~
→ Следуй за мной:Твиттер: Томек Сулковски

другая серия

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

напиши в конце

Если вы положительно относитесь к моему переводу, вы также можете подписаться на меня~ Кстати, мой опенсорсный проект, прошу волну звезд→посмотри сюда, красивая система блогов

Автор рекомендует наш китайский перевод в Твиттере

Категории