F12 в браузере что это
Одна из страниц отладки IE: Введение в инструменты разработчика F12
F12 Developer Tools - это набор инструментов, которые могут помочь в создании и отладке веб-страниц.
Написание отличных веб-страниц требует знания программирования и соответствующих инструментов для обнаружения и устранения неизбежных проблем. Windows Internet Explorer 9 обеспечивает представление представленного кода, а средство F12 обеспечивает представление о том, как Internet Explorer 9 интерпретирует эти страницы на уровне кода. Инструменты F12 также помогают определять и сообщать информацию об элементах на странице, таких как ссылки и отчеты об изображениях.
Функция инструмента F12
При анализе HTML-кода представление, наблюдаемое с помощью инструмента F12, является фактическим способом интерпретации объектной модели документа (DOM) Internet Explorer 9 страницы, а не исходным исходным кодом. Это важное различие, которое следует отметить. Из-за представления лучше всего обновить вкладку HTML, чтобы получить текущую DOM, особенно при использовании динамических элементов.
На вкладке HTML будет отображаться динамическая разметка веб-страницы в виде дерева. Это отличается от исходного исходного кода, в котором он отражает способ интерпретации Internet Explorer 9 исходного кода разметки и любых изменений, внесенных в DOM после загрузки страницы. Это представление необходимо регулярно обновлять, чтобы отражать все недавние изменения, внесенные в DOM.
Например, если сценарий используется для создания веб-страницы, источник просмотра не может отображать контент, который фактически отображается пользователю. Если вы используете исходный исходный код, может потребоваться некоторое время, чтобы обнаружить ошибки рендеринга HTML или каскадной таблицы стилей (CSS) CSS, но если вы используете инструмент F12, вы увидите фактический код, интерпретируемый в DOM Windows Internet Explorer.
Следующий пример демонстрирует это поведение. В следующем примере кода показан исходный код и сгенерированный код, интерпретируемый Internet Explorer при динамическом создании элементов на веб-странице.
Когда предыдущий пример представлен через Internet Explorer 9, его внешний вид похож на снимок экрана ниже. На странице показан набор элементов «» с текстом (всего 9).
При просмотре исходного кода (щелкните правой кнопкой мыши в окне браузера и выберите «Просмотреть исходный файл») вы можете увидеть только первый тег «», используемый в качестве родительского элемента, но не любой другой. содержание.
Но когда вы просматриваете его на вкладке HTML, вы увидите родительский тег («») и другие элементы «div» и текст, добавленные скриптом. При использовании и изменении кода сценария нажмите F5, чтобы обновить и получить текущее представление DOM.
Открыть инструмент F12
Вы можете использовать инструмент F12 на любой странице, просматриваемой в Internet Explorer 9. Метод: нажмите F12 или нажмите кнопку инструмента., А затем выберите «Инструменты F12». Инструмент F12 открывается в отдельном окне, но его можно закрепить на используемой странице, нажав кнопку закрепления или нажав Ctrl + P. Обратите внимание, что это окно нельзя закрепить при отладке на вкладке «Сценарий» (была нажата кнопка «Начать отладку»).
Если вам не нужен полный интерфейс инструмента, вы можете нажать после исправления инструментасвести к минимумуКнопка или нажмите Ctrl + M. Эти инструменты появятся в виде строки в нижней части окна, обеспечивая доступ к панели «Меню команд».
Навигация по веб-страницам и коду с помощью инструментов F12
Инструменты F12 примерно разделены на две области: инструменты для работы с страницами и визуализацией, а также инструменты уровня кода или отладки.
В большинстве случаев главное меню или сочетания клавиш будут использоваться для доступа к страницам и инструментам визуализации. Эти инструменты могут выполнять такие задачи, как создание отчета обо всех ссылках в документе или визуальное обобщение определенного элемента на странице. Для получения дополнительной информации об использовании страниц и инструментов визуализации, меню и кнопок, пожалуйста, обратитесь кНачало работы с инструментами разработчика F12。
Для получения дополнительной информации обратитесь к следующим темам:
Многие инструменты и параметры в инструментах F12 зависят от контекста, то есть, когда вы меняете вкладку, параметры также изменяются. Некоторые функции доступны для всех инструментов. Следующие ниже советы и рекомендации помогут вам начать использовать эти инструменты.
Изменить характеристики и переменные
В большинстве представлений инструмента F12 вы можете щелкнуть свойства и переменные, чтобы изменить значение, а затем ввести новое значение. На вкладке CSS вы можете переключать стили и правила, установив или сняв флажок.
Искать термин
Вы можете ввести определенный тег, идентификатор, элемент, переменную или строку в поле «Поиск», а затем нажатьEnterНайдите соответствующий элемент в коде веб-страницы или в подробной информации (например, в расширенном списке свойств на вкладке «Скрипт»). Все найденные элементы будут выделены в текущем представлении, и все элементы, кроме представления консоли на вкладке «Консоль» или «Сценарий», можно будет искать. заВкладка сети, Если в представлении «Сводка», поиск откроет представление «Подробности» и отобразит результаты поиска для всех категорий. На вкладке «Сценарий» вы также можете искать все файлы сценариев, которые будут использоваться на странице, а не только файлы сценариев, которые будут отображаться.
Щелкните, чтобы выбрать элемент
Если вы хотите найти определенный элемент в большом дереве DOM, вы можете выбрать каждый элемент в браузере, а затем выделить их на вкладке HTML инструмента F12. В окне отладки инструмента F12 нажмите кнопку «Щелкните, чтобы выбрать элемент».Или нажмитеCtrl+BДля выделения элементов на странице при наведении курсора на верхнюю часть страницы. Когда вы щелкаете по выделенному элементу, откроется вкладка HTML и прокрутится до выбранного элемента на панели кода. В некоторых случаях вам может потребоваться обновить вкладку HTML, чтобы увидеть этот элемент.
С F12 есть Инструмент интерфейса разработчика, поэтому я буду продолжать исследовать, после проверки нескольких блогов и информации я подытожил свое собственное понимание и память, я надеюсь помочь друзьям, которые нужно, хеэ!
Сначала введите три верхние функции в инструменте разработчика Chrome, а также три функциональных страница, которые используют элементы, консоль, исходные коды и сеть (сеть).
- Элементы: Используется для просмотра или модификации свойств HTML-элементов, свойств CSS, событий прослушивания, точек останова и т. Д.
- Консоль: Консоль обычно используется для выполнения одноразового кода, просмотреть объект JavaScript, просмотрите информацию о регистрации журнала или информацию об исключении.
- Исходный код: Эта страница используется для просмотра исходного кода HTML-файла HTML страницы, исходный код JavaScript, исходный код CSS, и самое главное, чтобы отладить исходный код JavaScript, вы можете добавить точки останова в код JS.
- Сеть: Сетевая страница в основном используется для просмотра информации, связанной с подключением сети.
1、 Элементы
Просмотр кода элемента : Нажмите, как показаноСтрелка (или используя ярлыки клавиш) Ctrl+Shift+C ) Введите режим элемента выбора, затем выберите элемент, который вы хотите просмотреть со страницы, а затем найдите конкретное местоположение исходного кода элемента в столбце элемента элемента разработчика (элементы).
Просмотр свойств элемента : Вы можете просмотреть деталь от позиционного исходного кода, такого как класс, SRC, вы также можете просматривать все свойства в сторону правой, как показано на следующем представлении изображения
Изменить код и свойства элемента : Вы можете прямо дважды щелкнуть деталь, которую вы хотите изменить, то введите изменения или проверьте щелчок правой кнопкой мыши после того, как вы хотите изменить раздел, как показано ниже
Примечание: Эта модификация также вступает в силу только на текущей рендеринге страницы и не изменяет исходный код сервера, поэтому эта функция также используется в качестве эффекта отладки страницы.
Введение в боковую панель правой стороны: Как показано ниже
2、 Приставка
- Просмотреть объекты JS и их свойства
- Выполнить оператор JS
- Просмотр журнала консоли: при использовании функции Console.Log () в коде JS веб-страницы JS вывод информации журнала отображается в консоли. Информация журнала обычно включена во время разработки и отладки, и когда она официально запущена, функция, как правило, будет удалена.
3、 Исходный код Его основная функция описана ниже
4、 Общая функция сети заключается в следующем (роль журнала сохранения - это предотвратить перезагрузку страницы, когда журнал будет пустым. Это довольно важно.):
Запросить файл Описание файла Описание
Всего четыре модуля:
Приведенное выше мое резюме, контент немного больше, я надеюсь, что каждый может увидеть пациента. , Chrome devtools также имеет много очень полезных функций, вы можете продолжать исследовать Я надеюсь, что мое резюме полезно для всех.
Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:
Elements
Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!
Найти нужный тег в древе не сложно, есть 2 способа. Способ первый - перед Elements в меню находятся 2 иконки, вторая из которых перевод сайта в мобильную версию (не надо даже телефон покупать, всё итак видно верстальщику), а первая - выбрать элемент на странице. Достаточно нажать на первую кнопку, выбрать нужный блок и кликнуть по нему левой кнопкой мыши, таким образом у нас откроется именно данный тэг для корректировки. Метод второй, более быстрый - сразу правой кнопкой мыши нажать на нужный участок сайта и выбрать "Просмотреть код".
Итак, практическая задача, создайте 3 колонки через float:left с содержанием картинки + текста с одним классом. Далее через панель разработчика добавьте рамки, подкорректируйте расстояние между блоками и текстом используя внутренние и внешние отступы (меняя свойства класса), измените цвет текста в каждом блоке на свой цвет (тут уже element.style). Этого будет вполне достаточно, хотя для себя можете поэкспериментировать меняя таким образом код и других сайтов. Но помните самое важное, Вы не изменяете настоящие html и css файлы, а только временные конкретно данной страницы и как только вы обновите страницу, то и слетят все Ваши настройки!
Console
Без неё и жизнь не мила у любого программиста :) Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку "all", то есть выводить все ошибки. По умолчанию установлен всегда "all", но зная Вас, мои ученики. :)
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение), а так же при работе Ajax и других внешних скриптов может указываться строчка 1 или 0 в исполняемом файле, а никак не строка, откуда этот самый AJAX был выполнен. Это стоит брать во внимание!
Работая с JavaScript можем столкнуться с тем, что по клику происходит переадресация на другую страницу в формате: click - ошибка - переадресация, а ошибка произошла перед строчкой, которая должна была заблокировать переадресацию и поэтому в консоли пусто. Решается всё предельно просто, установите галочку Preserve Log, и тогда логи не будут очищаться после перезагрузки или переадресации страницы. Забудете об этой фишке, то будете ошибку пол года искать :)
О том, что наши заметки попадают в консоль из console.log я писать не буду, Вы итак это знаете из общего курса :)
Sources и Network
Отличный способ промониторить все входящие и исходящие запросы и их результат выполнения. Во вкладке Sources мы можем увидеть все подгруженные дополнительные файлы, а именно картинки и скрипты. Самый простой способ достать нужную картинку, глянуть на её размеры, сохранить к себе на комп. Открыть JavaScript файлы там так же можно. По клику правой кнопкой на нужный файл можно выбрать пункт "Open link in new tab", и уже с новой страницы сохранить файл нажав комбинацию ctrl+s . Согласитесь, удобно же :)
Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.
На дате обновления файла хочу остановиться подробнее, бывает так, что файл хоть и был изменён, но браузер всё равно не проверяет его версию, он просто загружает старый вариант сохраненный в кэше. Чтобы очистить кэш браузера у клиента достаточно изменить имя файла с scripts.js?v=1 на scripts.js?v=2. Как видите, мы лишь поменяли переданные GET данные, а скрипт уже практически у всех будет подгружаться новый (не 100%, но вполне приемлемо для большинство сайтов). Но после правки запятой в скрипте во время разработки не так уж и удобно бегать и менять html с подключением этого самого js файла, тут для разработчика приходит на помощь ещё одна важнейшая галочка "Disable cache", если она включена, то все файлы не будут кэшироваться и каждый раз будут загружаться новые! Разрабатываем сайт с этой галочкой, а при загрузке новой версии скриптов всем пользователям меняем лишь версию ?v=3.
Preview и Response
После запроса сервер возвращает нам что-либо, в Preview попадёт удобный для человека вид, а в Response - неотформатированный исходник. На примере запроса изображения во вкладку Preview попадёт сама картинка, а исходный код картинки по соображениям морали будет скрыт, но вот если Вы запросили HTML, JS, PHP файлы, то как раз заглянуть во вкладку Response стоит обязательно для того, чтобы убедиться, что там вернулся именно тот контент, который мы запросили и ожидаем увидеть! При работе с Ajax в Preview мы получим удобный вид JSON ответа похожего на HTML-древо в разделе Elements, что так же упростит нам разработку сайта.
Ajax и панель разработчика
П.С. Всем моим гостям я желаю успешного программирования, а с учеников требую идеального понимания того, что я тут расписал. И если я когда-нибудь спрошу у Вас был ли отправлен AJAX запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как "блондинки". :)
Данная статья в будущем ещё будет дорабатываться, возможно!
Вебмастер, который не умеет пользоваться инструментами или вообще не знает о них, никуда не годится, ему стоит приложить определенные усилия в своем развитии и в перерывах между созданием очередного веб-шедевра прочитать данную статью, дабы самостоятельно решать проблемы на своем сайте или, по крайней мере, давать более полную информацию на запросы службы поддержки.
Скажу сразу, в данной статье не будет описываться весь функционал панели, но подробно будет рассмотрен функционал и возможности нескольких, наиболее интересных для начинающего веб-мастера вкладок.
Панель разработчика браузера - наверное самый главный инструмент настоящего вебмастера, который позволяет сложить полную картину происходящего при загрузке страницы сайта и после нее.
Информации получаемой из панели зачастую достаточно, чтобы указать на причину возникновения практически любой проблемы на сайте, пренебрегать этой информацией, как минимум, неразумно.
В наше время, разработчики браузеров не забывают о панели разработчика, она обязательно имеется в любом, более менее современном браузере и можно сказать, что ее наличие является стандартом, так что вы, скорее всего, найдете ее в своем браузере, даже если ранее не подозревали о ее существовании.
Браузеров много, нюансов работы с ними еще больше, но в качестве примера я буду приводить панель браузера Chrom, но пугаться не стоит, принцип ее работы практически у всех браузеров одинаков и сравнивая функционал одного браузера с другим, вы зачастую найдете много общего между их панелями.
Итак, давайте посмотрим на эту панель.
Нажмите клавишу F12 и появиться панель разработчика.
Сразу разбежались глаза, куда смотреть, на что нажимать непонятно. Давайте будем идти по порядку.
По-умолчанию открыта первая вкладка "Elements".
В этой вкладке выводиться html-код текущей страницы.
Внутри вкладки можно получить полную информацию не только о расположении html-блоков, но и просмотреть какие именно js и css-файлы подключаются при ее загрузке и даже ознакомиться с содержимым этих файлов, просто нажав на соответствующую ссылку в коде страницы.
Справа от кода страницы выводится колонка с css-стилями и правилами действующими для текущей страницы или html-блока, который будет вами выделен.
Вот тут и начинаются чудеса. Вкладка позволяет редактировать как html-код, так и css-правила.
Выберите интересующий html-блок, выделите его и в правой колонке отобразятся его css-стили. Нажмите правой кнопкой мыши на этом блоке и выберите одно из предложенных действий "Edit as HTML" и вы сможете редактировать html-код данного блока. Результат данного редактирования вы увидите сразу по завершению, все редактирование происходит, так сказать, в режиме онлайн, сразу на странице выводится результат.
Такая же картина с редактированием css-правил для выделенного блока. Вы можете просмотреть какие стили действуют на этот блок в данный момент и, при необходимости скорректировать их, отключить ненужные или наоборот - добавить какое-то свое правило. Результат этих действий будет применен к элементу сразу же.
Не стоит думать, что изменения html и css в этой вкладке каким то образом влияют на реальное положение дел на вашем сервере и вы реально редактируете html и css файлы вашего сайта. Все это происходит лишь в браузере и все изменения вам надо будет перенести в эти файлы самостоятельно.
Смотрим в колонку со стилями и замечаем, что рядом с каждым стилевым блоком выводится не только ссылка на css-файл, но и строка, где это правило размещается внутри указанного файла. Воспользовавшись этой информацией вы легко найдете нужный файл на сервере и место для редактирования внутри этого файла.
Освоив данную вкладку вы сможете решать вопросы связанные с внесением небольших изменений в верстку страницы и стилевое отображение ее отдельных элементов, что существенно сэкономит ваше личное время и нервы. Данная вкладка обязательна к изучению в первую очередь.
Переходим к следующей вкладке - "Network".
Ответ от сервера можно получить во вкладке Preview данного запроса. Очень важно, чтобы ответ был ожидаемым, тогда и произведенное пользователем действие будет выполнено, иначе возникает ошибка. Если она возникает, то как раз ответ сервера и даст знать о причинах проблемы.
Сервер может возвратить текст ошибки типа "Warning. " или "Fatal Error. ", либо возвратить номер ошибки сервера, например 404 или 500, а может такое случиться, что вкладка ответа будет пуста - ответ не был получен. Эта информация очень поможет в решении возникшей проблемы в службе поддержки куда вы с ней обратитесь, она укажет на возможные причины ее возникновения, а зачастую явно покажет, куда надо копать.
Так что не проходим мимо этой вкладки стороной, информация получаемая из нее очень интересна и полезна, хотя бы для общего развития. Всегда полезно знать, что куда уходит и откуда что приходит)
Вкладка "Console" выводит лог проблем возникших при загрузке страницы в js-скриптах, чтобы их было можно отследить. Там же могут выводится ошибки возникшие при попытке загрузить отсутствующий файл при загрузке текущей страницы. Критичные проблемы отображаются красным цветом и зачастую именно их решение возвращает работоспособность всему сайту, если она была нарушена.
Информация из вкладки Console очень полезна для вебмастера, позволяет сразу отследить возникновение конфликтов в скриптах при загрузке страницы или банальные ошибки. Текст ошибки сообщает о ее типе и месте ее возникновения, указывается js-файл и место в этом файле, где ошибка была замечена, что помогает в решении этих ошибок.
Надеюсь теперь, ознакомившись с перечисленными вкладками панели разработчика, вам станет проще работать со своими сайтами, выявлять и устранять возникшие проблемы не обращаясь к специалистам или предоставлять этим специалистам более исчерпывающую информацию о положении дел.
Поскольку F12 является работником фронтального разработчика, я буду продолжать исследовать, после просмотра некоторых блог и информации, я подытожил свое собственное понимание и память, и я надеюсь, чтобы помочь друзьям, которые в этом нуждаются. Эй!
Во-первых ввести тройку функций страниц в Chrome Developer Tool, и три страницы функции, которые используют большинство элементов (элементы), консольные, исходный код, и сети (локальная сеть).
- Элементы: Используется для просмотра или изменения свойств элементов HTML, свойства CSS, слушать события, контрольные точки и т.д.
- Консоль: Консоль, как правило, используется для выполнения одноразового кода просмотр объекта JavaScript, просматривать информацию журнала вызовов или информацию об исключении.
- Исходный код:. Эта страница используется для просмотра исходного кода HTML файл, исходный код JavaScript и CSS исходный код Кроме того, самое главное, чтобы отлаживать исходный код JavaScript, вы можете добавить точки останова в коде JS.
- Сеть: Веб-страница используется в основном для информации представления, связанные с подключением к сети.
1, элемент (элементы)
Просмотр свойств элементов: Вы можете просмотреть часть из позиционированного исходного кода, такие как класс, SRC, вы можете также просмотреть все свойства в боковой панели справа, как показано в следующем виде изображения
Измените код и свойство элемента: Вы можете напрямую дважды щелкните раздел, который вы хотите изменить, а затем изменить его или проверить правую кнопку мыши после того, как вы хотите изменить раздел, как показано ниже
Примечание: Эта модификация также вступает в силу только на текущей странице рендеринга, и не изменяет исходный код сервера, так что эта функция также используется как эффект отладки страницы.
Введение в зависимости от стороны правой стороны: как показано на рисунке ниже
2. Консоль
3, исходный код "Основные функции описаны ниже
4, сеть (сети), как правило, следующим образом:
Запрос файла описания конкретных
В общей сложности из четырех модулей:
Откройте браузер, нажмите клавишу F12, нажмите NETWORK, вы можете просмотреть соответствующую информацию запроса сети, не забудьте обновить страницу, после открытия F12 начнутся только запись
Просмотр NetWork основная информация, которая просила адреса и запросить информацию, относящиеся к сети для каждого URL можно увидеть
URL, ответ код состояния, ответ типа данных, размер данных ответа, время отклика
URL запроса к фильтру и классифицируют
Выберите различные категории, чтобы увидеть запросы URL, легко найти
Кроме того, можно непосредственно найти запрос, связанный URL.
Вы можете ввести ключевые слова или регулярные выражения для запроса
Водопад может разделить важное потребление запроса, увидеть, место, когда запрос специфичных затрат времени
Мышь указывая на соответствующую область можно увидеть удельный расход времени
Что мы имеем в виду в каждом из других представителей при анализе конкретного, сколько времени потребления, через этот анализ сервера, который является проблемой
Queuing смысл очередей
Остановленный в том, что хост, который блокирует запрос для получения доступа к URL является одновременно и соединение предела, и должны ждать предыдущего выполнения для выполнения, на этот раз о расходе времени
DNS Lookup это время потребление разрешения доменных имен
Начальное подключение инициализирует время соединения, то здесь, как правило, TCP 3 подключения время рукопожатия
Ожидание Ожидание времени отклика, здесь, как правило, больше всего времени
Мы понимаем, что скорость каждого времени трудоемкого изменять и доступ оптимизировать сервер в соответствии с соответствующим временем.
Оставьте работу, давайте посмотрим на эту картину, где это отнимает много времени, как мы должны найти проблемы и решения? Поясним
Как использовать страницу отладки F12 браузера?
Программист пишет веб - страницу в соответствии с запросом. Невозможно написать полную цель. В целом, необходимо изменить вызов на запрос , чтобы достигнуть запрос. Инструмент разработчика F12 браузера может помочь programmaker отладки Вашего собственному кода ,
Инструменты разработчика F12 является инструментом , который доступен по запросу. Разработчики сайтов могут использовать F12 инструменты на любой веб - странице , чтобы быстро отладки JavaScript, HTML и каскадным Таблица стилей (CSS), а также отслеживать и идентифицировать веб - страницы или сети. Проблема производительности.
Что такое функция страницы отладки F12?
На левой стороне вкладки элементов является просмотр и редактирование страницы HTML структуры, вы можете дважды щелкнуть на свойства модифицированного элемента непосредственно на элементе.
Вкладка источников может проверить ресурс запроса, включая содержимое CSS, JS, картинки и т. Д. Различные точки останова также могут быть установлены. Редактирование сохраненного содержимого и сохраняет реакцию на страницу в режиме реального времени.
Это полезно для оптимизации перспективных страниц, ускоряя скорость веб-загрузки; щелкните кнопку «Запустить», вы можете запустить страницу анализа. Если анализ закончен, вы можете увидеть результаты анализа.
Это консоль JavaScript.
Вы можете имитировать свой телефон непосредственно в консоли, настроить UA, изменить состояние сетевого подключения.
Читайте также: