Как сохранить консоль в браузере
Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.
1. Быстрая смена файлов
Если вы пользовались Sublime Text, то вы, вероятно, не сможете жить без «Go to anything» (Примечание переводчика: для пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift). Вы будете счастливы узнать, что аналогичная функция есть в инструментах разработчика. Нажмите Ctrl + P (Cmd + P для пользователей Mac) когда открыта панель разработчика, что бы быстро найти и открыть любой файл в вашем проекте.
2. Поиск в исходном коде
Но что если вы хотите искать в исходном коде? Для поиска во всех загруженных файлах на странице нажмите Ctrl + Shift + F (Cmd + Opt + F). Этот метод поиска, так же, поддерживает поиск по регулярному выражению.
3. Переход к строке
После того как вы открыли файл во вкладке Sources, инструменты разработчика позволяют перейти к любой строке этого файла. Для этого нажимаем Ctrl + G для Windows и Linux (или Cmd + L для Mac), и введите номер строки.
Еще один способ, это нажать Ctrl + O, но вместо текста для поиска ввести ":" и номер строки (Примечание переводчика: а можно пойти еще дальше и ввести имя файла и номер строки используя ":" как разделитель между ними, при этом вводить имя файла полностью совершенно не обязательно, это же поиск).
4. Выборка DOM элементов с помощью консоли
- $() — эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ('DIV') вернет первый элемент DIV на странице.
- $$ () — эквивалентно document.querySelectorAll (). Возвращает список элементов (Примечание переводчика: а именно NodeList), которые соответствуют данному CSS селектору.
- $0 — $4 — история пяти последних элементов DOM, которые вы выбирали во вкладке Elements, где $0 будет последним.
Узнать больше функций консоли можно тут.
5. Использование нескольких кареток и выделений
При редактировании файла вы можете установить несколько кареток, удерживая Ctrl (Cmd для Mac) и нажав, там где вам нужно, таким образом, вы можете устанавливать каретки во многих местах одновременно.
6. Preserve Log
При включении параметра Preserve Log на вкладке Console, результаты будут сохранять, а не очищаться при каждой загрузке страницы. Это удобно если вы хотите просмотреть историю ошибок, которые появляются перед уходом со страницы.
(Примечание переводчика: аналогичное свойство есть на вкладке Network. При его включении история запросов перестает очищаться при переходах между страницами. Однако, если на странице была установлена переадресация с помощью JavaScript и выполнялся любой другой запрос, то практически всегда просмотреть результат этого запроса невозможно. Не забывайте отключать подобные свойства при долгой отладке! Инструменты разработчика практически всегда потребляют больше системных ресурсов чем сама страница!)
7. Прихорашивание минимизированных исходников
Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.
(Примечание переводчика: порой не хватает возможности включения этого свойства автоматически, как например это сделано в FireFox)
8. Режим устройства
Инструменты разработчика включают в себя мощный режим для разработки страниц оптимизированных под мобильные устройства. В этом видео от Google демонстрируется большинство его дополнительных функций, таких как изменение разрешения экрана, эмуляция прикосновения к сенсорному экрану и эмуляция низкокачественного сетевого соединения.
9. Эмуляция датчиков устройства
Еще одной крутой особенностью режима устройства является возможность имитации датчиков мобильных устройств, таких как сенсорные экраны и акселерометры. Вы даже можете указать ваши географические координаты. Объект расположен в нижней части вкладки Elements в Emulation -> Sensors.
10. Выбор цвета
При выборе цвета в редакторе стилей вы можете кликнуть по образцу цвета и появится окно выбора цвета. Пока это окно открыто ваш указатель мыши превращается в увеличительную лупу для выбора цвета, на странице, с точностью до пикселя.
11. Принудительное состояние элемента
Инструменты разработки позволяют симулировать такие CSS состояния DOM элемента как :hover и :focus, упрощая написание стилей для них. Это функция доступна в редакторе свойств CSS.
12. Отображение shadow DOM
Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.
13. Выбрать следующее вхождение
Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, дополнительно выделится следующее вхождение текущего слова, позволяя вам редактировать их одновременно.
14. Изменение формата цвета
С помощью Shift + Click по образцу цвета, в панеле редактирования CSS, формат цвета будет изменен на RGBA, HSL шестнадцатеричный (Примечание переводчика: при этом как шестнадцатеричную сокращенную форму, так и полную, и даже в заглавном регистре. Если вас и это не устроит, то браузер постарается найти данный цвет в списке стандартных цветовых констант. Единственным недостатком данной возможности является то, что для того что бы выбрать нужный формат, зачастую, приходится «проклацать» все другие возможные варианты).
15. Редактирование локальных файлов в рабочей области
Рабочие области — мощнейший инструмент панели разработчика, превращающий инструменты разработчика в IDE. Рабочая область содержит структуру файлов во вкладке Sources соответственно структуре вашего локального проекта, так что теперь вы можете редактировать и сохранять напрямую, без необходимости копировать и вставлять изменения во внешний текстовый редактор.
Что бы настроить рабочие области, перейдите во вкладку Sources (Примечание переводчика: включите панель навигации если она скрыта, для этого нажмите на кнопку Show navigator в левом верхнем углу вкладки) и щелкните правой кнопкой мыши в любом месте панели навигатора, или просто перетащите всю вкладку проекта в панель разработчика. Теперь, выбранная папка, её подкаталоги и все файлы в них будут доступны для редактирования независимо от того, на какой странице вы находитесь. Для еще большего удобства, вы можете использовать файлы которые используются на данной странице, что позволит редактировать и сохранять их.
UPD. Примечание переводчика:
Добавленная папка будет доступна со всех вкладок. По этому если в вашем проекте больше одного HTML файла, то достаточно будет открыть его в соседней вкладке браузера.
Яндекс Браузер
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Google Chrome
Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Opera
В левом верхнем углу нажмите кнопку Opera , выберите в меню пункт Разработка → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Mozilla Firefox
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Консоль .
Убедитесь, что во всех фильтрах (Сеть, CSS, JS, Защита, Журнал, Сервер) отмечен только один пункт — Ошибки . Для этого рядом с каждым фильтром нажмите значок .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Microsoft Edge
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Safari
Чтобы активировать консоль ошибок, в меню выберите Safari → Настройки → Дополнения и включите опцию Показывать меню «Разработка» в строке меню .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить объект и перейдите на вкладку Консоль .
Перейдите на вкладку Консоль и включите фильтр Ошибки . В узком окне название фильтра может быть скрыто: разверните окно.
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Сеть .
Яндекс Браузер
Откройте меню → Дополнительно → Дополнительные инструменты → Консоль JavaScript .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Google Chrome
Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Opera
В левом верхнем углу нажмите кнопку Opera , выберите в меню пункт Разработка → Инструменты разработчика и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Mozilla Firefox
Откройте меню → Веб-разработка → Веб-консоль .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Консоль .
Убедитесь, что во всех фильтрах (Сеть, CSS, JS, Защита, Журнал, Сервер) отмечен только один пункт — Ошибки . Для этого рядом с каждым фильтром нажмите значок .
Внимание. Если вместо значка нажать название фильтра, то проверка ошибок будет отключена.
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Microsoft Edge
Откройте меню → Другие инструменты → Средства разработчика .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить и перейдите на вкладку Console .
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Network .
Safari
Чтобы активировать консоль ошибок, в меню выберите Safari → Настройки → Дополнения и включите опцию Показывать меню «Разработка» в строке меню .
Нажмите правой кнопкой мыши в любой области страницы, выберите пункт Проверить объект и перейдите на вкладку Консоль .
Перейдите на вкладку Консоль и включите фильтр Ошибки . В узком окне название фильтра может быть скрыто: разверните окно.
Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.
Чтобы получить дополнительную информацию, сделайте скриншот содержимого вкладки Сеть .
На вкладке «Элементы» в инструментах разработчика Chrome много интересных функций, поддерживающих отладку и ускоряющих работу. К сожалению, начинающие веб-мастера им уделяют недостаточно внимания. В этой статье мы напомним про полезные функции.
Эта статья для начинающих разработчиков. Таких, кто начал заниматься веб-разработкой с нуля и относительно недавно, поэтому под спойлером — очевидные сведения.
Чтобы не запутаться в самом начале
Откройте сайт, который требует отладки, в Chrome.
Если вы хотите отредактировать элемент, щёлкните на нём правой кнопкой.
Нажмите «Просмотреть код». Откроются инструменты разработчика.
Теперь чётко виден макет:
A — элемент, который надо редактировать
B — команда вызова кода
C — HTML элемента
D — вкладка «Стиль»
1. Брейкпоинты (точки останова) DOM
Вы можете добавлять брейкпоинты к элементам DOM. Эта функция была в Chrome с 2017 года, но далеко не все её вообще заметили.
Это способ отладки кода, при котором вы можете установить брейкпоинт, отладить код, а потом вернуться к тому месту выполнения кода, где произошёл останов.
Щёлкните правой кнопкой на элементе, для которого вы хотите установить брейкпоинт.
Выберите пункт меню «Останов на»
Затем выберите нужный пункт: модификации поддерева, модификации атрибутов или удаления узла.
Типы брейкпойнтов при изменении DOM:
Модификации поддерева. Отвечает за удаление или добавление дочернего элемента выбранного узла или за изменения содержимого дочернего элемента.
Модификации атрибутов. Срабатывает, когда атрибут (класс, идентификатор, имя) добавляется или удаляется в текущем выбранном узле, или когда значение атрибута изменяется.
Удаление узла. Срабатывает при удалении выбранного узла из DOM.
2. Сохранить как глобальную переменную
Предположим, вы хотите получить ссылку на элемент в браузере для отладки. Обычно для этого используют методы DOM, такие как document.getElementById или document.getElementsByClassName , чтобы получить ссылку на узел элемента. Но то же самое делает функция «Сохранить как глобальную переменную» — и всего за один клик.
Используйте контекстное меню, чтобы выбрать параметр «Сохранить как глобальную переменную» при выборе элемента в дереве DOM.
Введите temp1 в консоль, чтобы увидеть выражение.
3. Прокрутить в видимую область
Если существует узел DOM, который не отображается в области просмотра, вы можете изменить положение области просмотра. Для этого нужна функция прокрутки в видимую область.
Функция пригодится, когда вы занимались отладкой и забыли, где были, или не можете найти нужный элемент на странице.
Щёлкните на узле правой кнопкой мыши и выберите «Прокрутить до просмотра». Окно просмотра прокручивается назад, до места с выбранным узлом.
4. Копировать путь JS
Если вы проводите автоматическое тестирование, необходимо скопировать пусть JavaScript путь узла. Делается это через контекстное меню: правый клик на нужном элементе → копировать — копировать путь JS.
Результаты вставляются в консоль (Ctrl + V).
5. Принудительные псевдоклассы для элементов
Вы также можете переключить псевдокласс между :active , :focus , :hover , :loaded , : focus-within или :focus-visible .
Как это делается:
перейдите на вкладку «Стили»
6. Вкладка «Стиль»
Объявления CSS для выбранного элемента можно динамически обновлять, используя вкладки «Стиль» и «Вычисленные» на панели «Элементы».
Селекторы, которые не соответствуют никаким элементам в документе, маркированы сероватым цветом.
Новые стили CSS добавляются на той же вкладке — их можно ввести вручную. По мере ввода будут появляться подсказки-предложения.
Кроме того, можно изменить иерархию DOM, переместив элемент с панели «Элементы» туда, куда требуется.
Используйте палитру, когда присваиваете значения цвета свойствам. Если зажать Shift и кликнуть на цветное поле, получится переключиться между форматами цветопередачи.
7. Скрыть элемент
Тут всё очевидно: вызываем контекстное меню на вкладке «Элементы», выбираем опцию «Скрыть элемент». А еще для этого есть горячая клавиша — просто h.
8. Удалить элемент
Снова вызываем контекстное меню на вкладке «Элементы, в этот раз — чтобы полностью удалить элемент из DOM. На Mac можно использовать Control+Z или Command+Z.
9. Найти элемент
Перед тем как начать поиск, убедитесь, что вкладка активна. Затем просто нажмите Ctrl+F, и в нижней части дерева DOM появится панель поиска. (Панель поиска поддерживает селекторы CSS и XPath.)
В Chrome DevTools много полезных функций, которые ускоряют работу и в целом дают больше возможностей. Конечно, чтобы всё это применять, нужно практиковаться и вырабатывать привычку мыслить как разработчик.
кто-нибудь знает способ сохранить консоль.вывод журнала в Chrome в файл? Или как Скопировать текст из консоли?
скажем, вы запускаете несколько часов функциональных тестов, и у вас есть тысячи строк консоли.выход журнала в Хром. Как его сохранить или экспортировать?
мне нужно сделать то же самое, и это решение я нашел:
включить лесозаготовки из командной строки с помощью флагов:
отфильтруйте файл журнала, который вы получаете для строк с CONSOLE(\d+) .
обратите внимание, что журналы консоли не отображаются с --incognito .
Chrome dev tools теперь позволяет сохранять вывод консоли в файл изначально
- открыть консоль
- щелкните правой кнопкой мыши
- выберите "Сохранить как.."
инструкции разработчика Chrome здесь.
существует плагин javascript с открытым исходным кодом, который делает именно это, но для любого браузера -debugout.js
Debugout.JS записывает и сохраняет консоль.журналы, чтобы ваше приложение могло получить к ним доступ. Полное раскрытие, я написал это. Он форматирует различные типы соответствующим образом, может обрабатывать вложенные объекты и массивы и может дополнительно поставить метку времени рядом с каждым журналом. Вы также можете переключать live-logging в одном месте и без необходимости удалять все ваши операторы ведения журнала.
Это может быть полезно или не полезно, но в Windows вы можете прочитать журнал консоли, используя трассировку событий для Windows
--enable-logging --v=1, похоже, не работает последняя версия Chrome.
для лучшего файла журнала (без нонсенса Chrome-debug) используйте:
вместо --v=1 что слишком много информации.
Он по-прежнему будет предоставлять ошибки и предупреждения, как вы обычно видите в консоли Chrome.
Я нашел отличный и простой способ для этого.
в консоли щелкните правой кнопкой мыши на консоли регистрируется объект
нажмите "Сохранить как глобальную переменную"
см. имя новой переменной-например, variableName1
введите в консоли: JSON.преобразовать в строки(variableName1)
скопируйте содержимое строки переменной: например
есть еще один инструмент с открытым исходным кодом, который позволяет сохранить все console.log вывод в файл на сервере - JS LogFlush (штекер!).
- кросс-браузер UI-менее замена консоли.вход на стороне клиента.
- система хранения журналов-на стороне сервера.
если вы используете сервер Apache на вашем localhost (не делайте этого на рабочем сервере), вы также можете опубликовать результаты в скрипте вместо того, чтобы писать его в консоль.
Инструменты разработчика веб браузеров — это мощнейший инструмент для отладки работы веб сайтов. Если вы ещё не знакомы с ним, то обратитесь к статье «Статический анализ исходного кода веб-сайта в браузере».
Используя Инструменты разработчика возможно выполнить любые изменения HTML разметки, стилей и JavaScript кода «на лету», наблюдая за изменения в реальном времени.
Сделанные изменения пропадают сразу после перезагрузки страницы. Если вам нужно, чтобы изменения кода, сделанные в Инструментах разработчика браузеров, сохранялись после перезагрузки страницы, то данная статья расскажем вам, как это сделать на примере Google Chrome (Chromium).
Откройте Инструменты разработчика (клавиша F12) и перейдите во вкладку «Sources», там найдите раздел «Overrides»:
Кликните на «Select folder for overrides», выберите папку, куда будут сохраняться файлы для перезаписи файлов сайтов. На запрос о правах доступа, нажмите кнопку «Разрешить»:
Поставьте галочку «Enable Local Overrides». Если вы не видите этот флажок, то перезапустите веб-браузер и вернитесь на эту влкадку Инструментов веб-разработчика.
После этого в «Sources» → «Page» в контекстном меню для любой страницы будет доступно «Save for overrides»:
Теперь все файлы, для которых вы выбрали «Save for overrides» будут сохранены на жёсткий диск. Вы можете делать любые изменения в них и они также будут сохранены на постоянной основе. И при повторном открытии сайтов вместо оригинальных файлов будут использованы сохранённые вами версии.
На вкладке «Sources» → «Overrides» вы увидите список всех сохранённых файлов для всех сайтов:
Как отменить Overrides (локальные переопределения)
На вкладке «Sources» → «Overrides» выберите файл, который вы не хотите использовать, чтобы вновь задействовалась оригинальная копия с сайта, нажмите на него правой кнопкой мыши и выберите «Delete»:
Как при открытии сайта не использовать определённые файлы скриптов или стилей
Если вы хотите, чтобы при входе на сайт не задействовался один или более файлов, то добавьте этот файл в Overrides и полностью удалите его содержимое — то есть будет применяться пустой файл, что фактически означает его удаление.
Как добавить скрипт или стили при открытии сайта
Вы можете добавить код или стили в уже существующие файлы с помощью Overrides. Либо обратите внимание на вкладку «Sources» → «Snippets». Если вы не видите пункт Snippets, то нажмите на кнопку » чтобы развернуть полный список пунктов.
Читайте также: