Вредоносное ПО (malware) - это назойливые или опасные программы,...
- Перевод
Исторически сложилось так, что Firefox пользуется широкой популярностью среди веб-разработчиков благодаря его расширяемости через подключение всевозможных плагинов и дополнений, написанных сторонними разработчиками. Идея выделения функционала в расширения позволила решать массу всевозможных задач прямо в браузере, не прибегая к внешним инструментам.
Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)
Встроенные инструменты разработки в Firefox
Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.При разработке интерфейса этих инструментов было перепробовано множество подходов и решений. В результате получился довольно приятный интерфейс, который любой желающий может испробовать, установив Firefox Aurora (хм, вы ещё его не поставили?)
Ну а под катом вас ждёт огромный перечень расширений, который обязательно окажется полезным для любого веб-разработчика.
Firebug
Это расширение идёт нулевым в списке расширений. Firebug установил стандарт в инструментах разработки во всех браузерах. Обычно используется для живого редактирования CSS и HTML, отладки JavaScript и оптимизации загрузки страниц. Некоторые из нижеупомянутых расширений основаны на Firebug, поэтому к этому расширению мы ещё вернёмся.На всякий случай напоминаю, что Firebug достаточно требователен к памяти, поэтому не забывайте его отключать (или просто не включать) на тех сайтах, с которыми вы не работаете.
Стандартные расширения Firefox для веб-разработчиков
За многие годы было разработано множество расширений для использования возможностей Firefox по максимуму. Некоторые из них популярны, другие вы, вероятно, увидите впервые. Если вы используете не упомянутое здесь расширение, напишите в комментариях!SeoQuake SEO
Расширение Seoquake поможет оптимизировать сайт для поисковых систем и социальных сетей.ShowIP
Показывает IP-адрес(а) текущей страницы в строке состояния. Также по правому клику отобразит имя хоста, информацию из hois, netcraft и пр. Там же можно скопировать IP-адрес.Stylish
Смена стилевых таблиц для сайтов. Stylish, подобно GreaseMonkey, имеет крупный репозитарий тем оформлений для сайтов типа Google, YouTube, Tumblr и других.Tamper Data
Расширение для просмотра и изменения HTTP/HTTPS-заголовков и параметров POST.Total Validator
Одновременная проверка страницы несколькими валидаторами. Работает с внешними и внутренними сайтами, а также просто с локальными страничками.От автора: на пути к тому, чтобы стать мастером CSS, вам нужно знать, как делается отладка и оптимизация CSS. Как вы диагностируете и устраняете проблемы с рендерингом? Как вы обеспечиваете, чтобы CSS не вызывал проблем с производительностью для конечных пользователей? И как вы обеспечиваете качество кода?
Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим браузерные инструменты для разработчиков Chrome, Safari, Firefox и Microsoft Edge.
Инструменты для разработчиков на базе браузера
Большинство настольных браузеров включают функцию инспекции элементов, которую вы можете использовать для отладки CSS. Активировать эту опцию вы можете, кликнув правой кнопкой мыши и выбрав пункт «Просмотреть элемент». Пользователи Mac также могут инспектировать элемент, кликнув на нем, удерживая клавишу Ctrl. На приведенном ниже рисунке показано, что вы можете видеть в Firefox Developer Edition.
Инструменты для разработчиков Firefox Developer Edition
В Firefox, Chrome и Safari вы также можете нажать Ctrl + Shift + I (Windows / Linux) или Cmd + Option + I (macOS), чтобы открыть панель инструментов разработчика. На приведенном ниже рисунке представлены инструменты для разработчиков Chrome.
Инструменты для разработчиков Chrome
В Microsoft Edge вы можете открыть инструменты для разработчиков, нажав клавишу F12, как показано ниже.
Инструменты для разработчиков Microsoft Edge
Вы также можете открыть инструменты для разработчиков каждого браузера, используя меню приложения:
Microsoft Edge: Инструменты > Инструменты для разработчиков
Firefox: Инструменты > Веб-разработчик
Chrome: Вид > Разработчикам
Safari: Разработка > Показать веб-инспектор
В Safari вам может потребоваться сначала включить меню «Разработка», перейдя Safari > Настройки > Дополнительно и установив флажок «Показать меню» в строке меню. Ниже приведено представление для инструментов разработчика Safari.
Инструменты для разработчиков Safari 11
После открытия интерфейса инструментов для разработчиков вам может понадобиться выбрать нужную панель:
Microsoft Edge: Проводник DOM
Firefox: Инспектор
Chrome: Элементы
Safari: Элементы
Вы поймете, что открыли нужную панель, когда вы увидите HTML с одной стороны панели, а правила CSS — с другой.
Примечание. Разметка, которую вы увидите в панели HTML, является представлением DOM. Оно генерируется, когда браузер завершает анализ документа и может отличаться от исходной разметки. Использовав «Просмотр исходного кола» вы можете увидеть исходную разметку, но имейте в виду, что для приложений JavaScript такой исходной разметки может не быть.
Использование панели стилей
Иногда элемент не выглядит так, как ожидалось. Возможно, не применилось типографическое изменение, или отступ вокруг абзаца меньше, чем вы хотели. Вы можете определить, какие правила влияют на элемент, используя панель веб-инспектора «Стили».
Панель «Стили» организована в различных браузерах вполне согласовано. В первую очередь перечисляются стандартные стили, если они есть. Это стили, заданные с помощью атрибута style HTML, будь то автором CSS или программно с помощью скриптов.
Авторские правила стилей предшествуют стилям агента пользователя. Стилями агента пользователя являются стили браузера по умолчанию. Они также оказывают влияние на внешний вид вашего сайта. (В Firefox вам может потребоваться выбрать параметр «Показать параметры браузера», чтобы просмотреть стили агента пользователя. Этот параметр можно найти в панели «Параметры панели инструментов».)
Свойства и значения сгруппированы по селектору. Рядом с каждым свойством установлен флажок, позволяющий включать или отключать определенные правила. Нажав на свойство или значение, вы можете изменить его, чтобы избежать необходимости редактировать, сохранять и перезагружать код.
Определение проблем каскада и наследования
Когда вы проверяете стили, вы можете заметить, что некоторые свойства вычеркнуты. Эти свойства были отменены либо правилом каскада, либо конфликтующим правилом, либо более специфичным селектором, как показано ниже.
Определение пар свойств и значений, которые были заменены другим объявлением
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
На изображении выше цвет фона, границы и размер шрифта блока отображаются перечеркнутыми. Эти объявления были переопределены теми, что находятся в блоке.close, который является приритетным для в нашем CSS.
Определение недействительных свойств и значений
Вы также можете использовать инспектор элементов для обнаружения недействительных или неподдерживаемых свойств и значений свойств. В Chromium-браузерах неверные правила CSS отображаются перечеркнутыми, а рядом выводится иконка предупреждения:
Определение недопустимого значения свойства CSS с помощью Chrome
Firefox также вычеркивает недействительные или неподдерживаемые свойства и значения. Firefox Developer Edition также использует иконку предупреждения, как показано ниже. Стандартный Firefox отображает ошибки аналогично, но не включает значок предупреждения.
Как Firefox Developer Edition отображает недопустимые свойства и значения
На скриншоте ниже в Safari перечеркнуты красной линией и выделены желтым фоном и иконкой предупреждения неподдерживаемые правила.
Недопустимое значение свойства CSS в Safari
Microsoft Edge вместо этого использует для указания неподдерживаемых свойств или значений волнистое подчеркивание.
Неподтвержденное значение свойства CSS в Microsoft Edge
Когда речь идет об основных конфликтах отладки и наследования, какой бы браузер вы ни выбрали, это не имеет значения. Однако рекомендую вам ознакомиться со всеми ними для тех редких случаях, когда вам нужно диагностировать проблему, специфичную для браузера.
Отладка адаптивных макетов
Лучше всего проводить тестирование на устройстве. Однако во время разработки полезно имитировать мобильные устройства с помощью настольного браузера. Все основные настольные браузеры включают режим адаптивной отладки.
Chrome
Chrome в инструментах для разработчиков предлагает функцию панели инструментов устройства. Чтобы использовать ее, кликните иконку устройства (на фото ниже) в верхнем левом углу рядом с иконкой «Выбрать элемент».
Иконка режима адаптивного дизайна Chrome
Режим устройства позволяет имитировать несколько видов устройств Android и iOS, включая более старые устройства, такие как iPhone 5 и Galaxy S5. Режим устройства также включает функцию дросселирования сети для приближения к разным скоростям соединения и возможность имитировать оффлайн режим.
Firefox
В Firefox аналогичный режим называется Режимом адаптивного дизайна. Его иконка напоминает ранние iPod. Вы найдете ее в правой части экрана в панели инструментов для разработчиков, как показано ниже.
Иконка режима адаптивного дизайна Firefox
В адаптивном режиме вы можете переключаться между портретной и альбомной ориентациями, имитировать события касания и делать скриншоты. Подобно Chrome, Firefox также позволяет разработчикам моделировать медленные соединения посредством дросселирования.
Microsoft Edge
Microsoft Edge позволяет имитировать мобильные устройства на Windows, такие как вкладка Surface — для этого используется вкладка «Эмуляция». Выберите «Телефон на Windows» в меню «Профиль браузера», как показано ниже.
SitePoint.com с использованием режима эмуляции устройства Microsoft Edge
В дополнение к выбору ориентации и разрешения режим эмуляции позволяет тестировать функции геолокации. Однако вы не можете использовать режим эмуляции для имитации условий различных сетевых соединений.
Safari
Режим адаптивного дизайна Safari находится в инструментах разработчиков. Он похож на режим эмуляции Firefox, но добавляет возможность имитировать iOS-устройства, как показано ниже.
SitePoint.com при просмотре с использованием режима адаптивного дизайна Safari
Чтобы войти в режим адаптивного дизайна Safari, выберите Разработка > Войти в режим адаптивного дизайна или Cmd + Ctrl + R.
Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser"s devtools.
Note : Before you run through the examples below, open the Beginner"s example site that we built during the Getting started with the Web article series. You should have this open as you follow the steps below.
How to open the devtools in your browser
The devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:
How do you pull it up? Three ways:
The Inspector: DOM explorer and CSS editor
The developer tools usually open by default to the inspector, which looks something like the following screenshot. This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.
If you don"t see the inspector,
- Tap/click the Inspector tab.
- In Internet Explorer, tap/click DOM Explorer, or press Ctrl + 1 .
- In Microsoft Edge, or Opera, tap/click Elements.
- In Safari, the controls are not so clearly presented, but you should see the HTML if you haven"t selected something else to appear in the window. Press the Style button to see the CSS.
Exploring the DOM inspector
For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same:
- Delete Node (sometimes Delete Element ). Deletes the current element.
- Edit as HTML (sometimes Add attribute /Edit text ). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
- :hover/:active/:focus . Forces element states to be toggled on, so you can see what their styling would look like.
- Copy/Copy as HTML . Copy the currently selected HTML.
- Some browsers also have Copy CSS Path and Copy XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.
Try editing some of your DOM now. Double-click an element, or right-click it and choose Edit as HTML from the context menu. You can make any changes you"d like, but you cannot save your changes.
Exploring the CSS editor
By default, the CSS editor displays the CSS rules applied to the currently selected element:
These features are especially handy:
- The rules applied to the current element are shown in order of most-to-least-specific.
- Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
- Click the little arrow next to each shorthand property to show the property"s longhand equivalents.
- Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
- Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
- You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.
You"ll notice a number of clickable tabs at the top of the CSS Viewer:
- Computed : This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
- Layout
: In Firefox, this area includes two sections:
- Box Model : represents visually the current element"s box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
- Grid : If the page you are inspecting uses CSS Grid, this section allows you to view the grid details.
- Fonts : In Firefox, the Fonts tab shows the fonts applied to the current element.
Find out more
Find more out about the Inspector in different browsers:
- Chrome DOM inspector
The JavaScript debugger
The JavaScript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.
To get to the debugger:
Firefox : Select ➤ Web Developer ➤ Debugger or press Ctrl + Shift + S to open the JavaScript Debugger. If the tools are already displayed, click on the Debugger tab.
Chrome : Open the Developer tools and then select the Sources tab. (Opera works the same way.)
Edge and Internet Explorer 11 : Press F12 and then, Ctrl + 3 , or if the tools are already displayed, click on the Debugger tab.
Safari : Open the Developer Tools and then select the Debugger tab.
Exploring the debugger
There are three panes in the JavaScript Debugger on Firefox.
File list
The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.
Source code
Set breakpoints where you want to pause execution. In the following image, the highlight on the number 18 shows that the line has a breakpoint set.
Watch expressions and breakpoints
The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.
In the image, the first section, Watch expressions , shows that the listItems variable has been added. You can expand the list to view the values in the array.
The next section, Breakpoints , lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement listItems.push(inputNewItem.value);
The final two sections only appear when the code is running.
The Call stack section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click, and that the code is currently paused on the breakpoint.
The final section, Scopes , shows what values are visible from various points within your code. For example, in the image below, you can see the objects available to the code in the addItemClick function.
Find out more
Find more out about the JavaScript debugger in different browsers:
The JavaScript console
The JavaScript console is an incredibly useful tool for debugging JavaScript that isn"t working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:
If the developer tools are already open, click or press the Console tab.
If not, Firefox allows you to open the console directly using Ctrl + Shift + K or using the menu command: Menu ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console. On other browser, open the developer tools and then click the Console tab.
This will give you a window like the following:
To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):
- alert("hello!");
- document.querySelector("html").style.backgroundColor = "purple";
- var myImage = document.createElement("img"); myImage.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);
Now try entering the following incorrect versions of the code and see what you get.
- alert("hello!);
- document.cheeseSelector("html").style.backgroundColor = "purple";
- var myImage = document.createElement("img"); myBanana.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);
You"ll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!
Find out more
Find more out about the JavaScript console in different browsers:
- Chrome JavaScript Console (Opera"s inspector works the same as this)
Здравствуйте, дорогие друзья. Панель (консоль) разработчика в браузере – это незаменимый инструмент для каждого владельца сайта, с помощью которого можно быстро просмотреть html код страницы и css стили. А также узнать об ошибках, возникших при загрузке сайта и проверить сайт на адаптивность.
Именно работу с html кодом, css стилями и адаптивностью в панели разработчика мы сегодня и рассмотрим. Это те инструменты, которые требуются для решения большинства задач.
Для общего понимания картины давайте приведу пример, когда вам может понадобиться панель разработчика.
Допустим, вы пришли на мой блог, и вас заинтересовало, какой я шрифт использую или цвет и так далее. В общем, это может быть любой элемент на сайте. И вы захотели сделать также у себя на сайте.
Тогда вы смотрите через панель разработчика в браузере на нужный элемент, где видны html код и css стили к нему.
Другой вариант использования панели, – это когда вы хотите что-то сделать на сайте, но пока не знаете, как это будет выглядеть.
В этом случае тоже можно использовать панель разработчика и посмотреть, как ваша задумка будет выглядеть в браузере. Ведь всё, что вы делаете в панели разработчика видно только вам. А для того чтобы ваши эксперименты увидели посетители, потребуется переносить стили и коды в файлы сайта.
Открытие панели вебмастера и знакомство с интерфейсом
Панель разработчика присутствует в каждом современном браузере. Для того чтобы её открыть нужно нажать на клавиатуре клавишу F12.
Интерфейс панели в разных браузерах будет отличаться, но принципы работы схожие.
Мне больше нравится панель в браузере Firefox.
Сама панель поделена на две половины и содержит вкладки и инструменты для работы.
В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)» .
Для работы со стилями нужно перейти к разделу панели CSS, где можно добавлять стили или отключать имеющиеся, убрав чекбокс напротив них. Менять можно всё.
Здесь же можно узнать в каком файле находятся стили, и на какой строке.
Как проанализировать html элемент на сайте и узнать его стили css
Давайте рассмотрим пример на моей , которая располагается в каждой статье.
Для того чтобы проанализировать нужный элемент, необходимо нажать на нём правую кнопку мышки, и выбрать пункт меню .
Весь принцип работы с кодом, в панели, заключается в том, что нужно выбрать код html в левом окне, а в правом будут стили для этого элемента.
И если со стилями всё достаточно просто, то при работе с кодом html нужно понимать его целостность. То есть каждый элемент имеет теги, в которых он находится. Это могут быть абзацы, ссылки, изображения и так далее. Чаще всего это блоки DIV, которые имеют открывающий тег < div> и закрывающий div> . И в панели это всё хорошо видно.
При копировании или редактировании важно понимать, где блок начинается и где он заканчивается. Допустив здесь малейшую ошибку можно нарушить всю вёрстку шаблона.
В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.
Как скопировать код html из панели в файлы сайта
Идей для применения панели разработчика может быть много. Поэкспериментировав в панели, полученный результат нужно перенести в файлы сайта. И тут есть некоторая трудность. Дело в том, что в панели отображается html код, а большинство современных сайтов, в том числе и на платформе WordPress, созданы с помощью языка программирования PHP. А это, как небо и земля.
Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.
Для этого нужно открываю панель разработчика, исследуя нужный элемент. Определив начало блока ДИВ, нажимаете правую кнопку мушки и выбираете пункт меню «Копировать внешний HTML»
Код скопирован в буфер обмена, и теперь его нужно вставить в то место, где вы хотите видеть этот баннер.
Процесс этот описывать достаточно сложно, поэтому предлагаю посмотреть видеоурок, в котором всё подробно рассказано и показано.
Как перенести стили из панели разработчика в файлы сайта
После того как вы определились с кодом и стилями можно приступать к переносу их в файлы сайта. Так как пока все эти изменения видны только вам в браузере и, если обновить страницу, то все изменения исчезнут.
, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.
Как проверить адаптивность шаблона в панели разработчика
Для перевода панели в адаптивный режим нужно нажать сочетание клавиш CTRL+SHIFT+M или кнопку в панели разработчика, которая в разных браузерах расположена по-разному.
Заключение
В этой статья я рассмотрел не все инструменты панели разработчика, а лишь те, которые могут пригодиться и используются многими вебмастерами чаще всего.
Использование панели и навыки работы с кодом и стилями незаменимы при работе с сайтами и партнёрскими программами.
Берите инструмент на вооружение, он вам пригодится ещё много раз.
Если же остались вопросы, буду рад ответить на них в комментариях.
Друзья, желаю вам успехов. До встречи в новых статьях.
С уважением, Максим Зайцев.
Хочу признаться в том, что я большой поклонник браузерных инструментов для разработчиков. Это действительно секретное супер оружие для веб-разработчиков.
Без них мы бы посмотрели на веб-страницу отчаявшимся взглядом, пытаясь понять, почему же элементы не выравниваются и изображение не загружается, а также почему не работают другие более сложные вещи.
Недавно я перешел на ежедневное использование Firefox и осознал, что практически ничего не знаю о инструментах разработчика Firefox. Кроме того, я понял, насколько сильно они улучшились за последние несколько лет! Но их зачастую обходят стороной в тематических статьях. На мой взгляд, это несправедливо, поэтому я счел своим долгом рассказать вам о них.
И вот вышла статья, которая освещает некоторые из этих инструментов, плюсом в комплекте идут наглядные гифки, чтобы вам было не так скучно читать.
Трюки со скриншотами
Скриншот целой страницы
Откройте в браузере панель «Веб-разработка». Выберите из списка пункт «Инструменты разработчика». Щелкните по вкладке «Настройка инструментов» и поставьте галочку рядом с «Сделать скриншот всей страницы». Затем на панели инструментов нажмите на иконку фотоаппарата. Скришот страницы будет сохранен в папке по умолчанию, используя текущую ширину страницы.
Скриншот узла
Открывайте вкладку «Инструменты разработчика», выбирайте режим «Инспектор», затем слева от этого режима включайте функцию «Выбрать элемент со страницы». Теперь вы можете найти нужный вам узел, кликнуть по нему правой кнопкой мышки и выбрать пункт «Скриншот узла».
Удаление класса из элемента
Иногда элемент имеет несколько классов, и вы не можете сразу понять, какой класс отвечает за определенный атрибут. Выбрав элемент на панели «Инспектор» и нажав кнопку «.cls» в правом верхнем углу панели «Правила», вы сможете увидеть список всех классов и легко отключить / повторно включить их.
Перетаскивание туда-сюда на панели «Инспектор»
На панели “Инспектор” можно перетащить любой HTML-элемент и изменить его положение на странице. Просто зажмите левую кнопку мыши в начале строки, у вас должна появиться иконки руки, затем можно сеять хаос на веб-странице.
Горячие клавиши для Selectors API
Еще одной крутой особенностью «Консоли» являются горячие клавиши для Selectors API. Возвращаемся в «Консоль» и вводим:
$ () - горячая клавиша для document.querySelector()
$$ () - горячая клавиша для document.querySelectorAll()
Используйте значение последней операции в “Консоли”
Используйте $_ чтобы вернуться к значению предыдущей операции, выполненной в “Консоли”
Щелкните правой кнопкой мыши по любому элементу в “Инспекторе” и выберите пункт “Использовать в консоли”. Он будет назначен временной переменной.
Отладка JavaScript
Вы можете установить контрольные точки, и выражения для отслеживания в исходных файлах JS на панели “Отладчик” в “Инструментах разработчика”, чтобы затем увидеть все происходящие изменения.
Перезагрузив страницу, контрольные точки и выражения для отслеживания останутся неизменными, и скрипт останется в желаемой позиции.
