Бьюсь об заклад вы привыкли к инструментам разработчика в Chrome. Ежедневная проверка вёрстки, просмотр логов или анализ загрузку страницы делается на автопилоте. Но что если есть альтернатива, которая в некоторых моментах работает иначе и часто даже лучше?
Рубрика «chrome devtools»
Chrome DevTools — не панацея. Что умеет Firefox
2026-02-10 в 14:05, admin, рубрики: chrome, chrome devtools, css, dev tools, DevTools, Firefox, html, timeweb_статьи11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком
2022-05-01 в 10:26, admin, рубрики: chrome, chrome devtools, console, css, DevTools, Google Chrome, html, javascript, верстальщик, верстка, Разработка веб-сайтов, Учебный процесс в ITПредисловие
Я полагаю, что вы должны быть знакомы с браузером Chrome, так как это ближайший партнер разработчиков интерфейса. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.
В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки.
Давайте посмотрим.
1. Повторно отправить запрос XHR
Chrome DevTools: Хитрости при отладке
2021-11-03 в 14:24, admin, рубрики: chrome devtools, debug, javascript, отладкаВ сети полно обзоров Chrome DevTools, которые демонстрируют многочисленные возможности этого прекрасного инструмента. DevTools настолько большие, что познать их полностью, как мне кажется, уже почти невозможно.
В этой заметке я бы хотел остановиться на различных нюансах, полезных при отладке. Какие-то из них я почерпнул в сети (например в комментариях на Хабре), до каких-то додумался сам. Надеюсь вы найдёте для себя что-нибудь полезное.
Все горячие клавиши в статье будут даны для linux/windows.
PopUps, popovers, dropdowns и прочие "всплывашки"
Профессиональное применение инструментов разработчика Chrome: 13 советов
2020-08-03 в 13:16, admin, рубрики: chrome devtools, Google Chrome, javascript, Блог компании RUVDS.com, браузеры, разработка, Разработка веб-сайтовАвтор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.
Ускоряем фронтенд. Когда много запросов к серверу — это хорошо
2020-02-27 в 11:19, admin, рубрики: CDN, chrome devtools, css, font-display, Google Fonts, graphql, html, http/2, lighthouse, preconnect, preload, Service Workers, webpack, webpagetest, Блог компании ITSumma, высокая производительность, Клиентская оптимизация, кэширование, оптимизация, производительность, Разработка веб-сайтов, разработка мобильных приложений, сервис-воркеры, шрифтыВ этой статье описываются некоторые методы ускорения загрузки фронтенд-приложений, чтобы реализовать отзывчивый, быстрый пользовательский интерфейс.
Мы обсудим общую архитектуру фронтенда, как обеспечить предварительную загрузку необходимых ресурсов и увеличить вероятность того, что они в кэше. Немного порассуждаем, как отдавать ресурсы с бэкенда и когда можно ограничиться статическими страницами вместо интерактивного клиентского приложения.
Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:
- Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
- Сократить запросы, блокирующие рендеринг
- Избегать последовательных цепочек
- Повторно использовать соединения с сервером
- Сервис-воркеры для мгновенного рендеринга
- Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
- Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
- Проверить, что хэши частей пакета не меняются без необходимости
- Запрашивать данные для страницы до загрузки всего приложения
- Не блокировать рендеринг загрузкой второстепенных данных
- Рассмотреть рендеринг на стороне сервера
- Следующая страница: сколько времени требуется для перехода на следующую страницу
- Запрашивать дополнительный код до того, как он понадобится
- Кэшировать и повторно использовать данные на клиенте
Вышел Chrome 69 с генератором случайных паролей
2018-09-07 в 10:49, admin, рубрики: chrome devtools, firebug, Google Chrome, Блог компании GlobalSign, информационная безопасность, менеджер паролей
Chrome DevTools в 2018 году
К десятилетию Chrome компания Google выпустила масштабное обновление — Chrome 69 с обновлённым интерфейсом, новым менеджером-генератором случайных паролей, ответами в «омнибоксе» без захода на поисковый сайт, поиском вкладок (если у вас открыто много вкладок и вы хотите найти нужную) и другими изменениями. К сожалению, новая версия не стала таким праздником, на какой рассчитывали создатели.
Читать полностью »
Трассировка и Javascript
2018-06-10 в 17:53, admin, рубрики: chrome devtools, Google Chrome, http, javascript, node.js, performance analysis, tracing, Серверная оптимизация
Когда-нибудь трассировали рантайм вашего приложения? Знаете сколько запросов делает вон тот серый ендпоинт, который? А как долго вычитываются те кросс-референсы на схожий тип ресурсов с каждой странички сущностей, которую нужно вернуть в запрос? Пытались ли вы замерить как долго приходится ждать пользователю из-за опциональных полей запроса, которые он время от времени добавляет? Задумывались ли вы что будет если запараллелизировать эти шесть запросов к тем двум базам данных?
Если что-нибудь выше звучит интересно, или как минимум знакомо — добро пожаловать под кат.
Читать полностью »
Обзор всех инструментов разработчика Chrome DevTools
2017-09-04 в 12:40, admin, рубрики: chrome devtools, Google Chrome, javascript, Блог компании SimbirSoft, инструменты разработчикаНачинающему JS разработчику чаще всего не понятно назначение всех инструментов, которые ему предоставляет браузер. Да и относительно опытный разработчик, если в основном решает однотипные задачи вряд ли может похвастаться, что регулярно пользуется всеми возможностями которые ему предоставляют инструменты разработчика браузера. Однако познакомиться с ними было бы крайне полезно хотя бы для того, чтобы при решении каких то новых проблем Вы сразу же знали где искать ответ, а более подробно изучив тонкости каждого из них, Вы сможете поднять свою производительность труда на новый уровень.
Отдельно бы хотелось отметить, что DevTools находится в постоянной активной разработке поэтому название инструментов/панелей/вкладок, как и их наличие в целом или способ доступа к ним со временем может быть изменен. Поэтому не стоит пугаться, если на момент прочтения Вами этой статьи DevTools будет незначительно отличатся от того что указано в описании или на скриншотах в этой статье.Читать полностью »
Web crawler с использованием Python и Chrome
2017-05-16 в 12:22, admin, рубрики: chrome debuger, chrome devtools, crawling, Google Chrome, phantomjs, python, scraping, selenium, Тестирование веб-сервисовДобрый день, дорогие друзья.
Недавно, сидя на диване, я задумался о том, что хочется мне сделать своего паука, который что-то бы смог качать с веб сайтов. Но качать он должен был бы не простой загрузкой, а как настоящий милый добрый браузер (т.е. JavaScript чтобы исполнялся).
В моей голове всплыли такие интересные штуки, как Selenium, PhantomJS, Splash и всякое подобное. Все эти штуки были мне немного втягость. Вот какие причины я выявил:
- Дело в том, что я хотел бы писать на своем любимом питоне, потому что очень не люблю JavaScript, а это уже означает, что большая часть уже не работала бы (или пришлось их как-то склеивать, что тоже отстой).
- Читать полностью »
Двенадцать полезных Chrome DevTools Tips
2016-10-03 в 8:36, admin, рубрики: chrome devtools, front-end разработка, Google Chrome, javascript, Блог компании Инфопульс Украина, браузеры, производительность, Разработка веб-сайтовВ данной статье мы рассмотрим некоторые функции инструментов разработчика Chrome. Конкретно я использую Chrome Canary и вам советую. И не потому, что это отсылка на маленьких милых птиц, которые пожертвовали своими жизнями чтобы мы могли добывать свежий уголь.
Некоторые из DevTools функций вы возможно не знали. Я буду очень счастлив, если хотя бы одну из них вы найдете для себя полезной.
(В статье ниже присутствуют анимированные гифги, которые начинают раздражать после первого цикла. Поэтому я советую открыть dev tools и удалить DOM ноды, которые отвечают за изображения.)
Итак, поехали:
Копируем переменную в буфер обмена
Об этой возможности я узнал из комментариев, и считаю ее достаточно полезной чтобы быть описанной в начале. Иногда бывает нужно скопировать содержимое переменной в буфер обмена. Например html код или json объект. Для этого можно использовать copy функцию.
copy (someVariable)
Теперь текстовое представление переменной скопировано в буфер обмена.
Читать полностью »