Имитация медленного интернета
Если вы занимаетесь веб разработкой или у вас есть свой сайт, то хорошим навыком будет - научиться проверять скорость загрузки сайта при медленном интернете:
1. Откройте целевой сайт.
2. Зайдите в инструменты разработчика нажав
3. Перейдите во вкладку "Сеть" / "Network".
4. В выпадающем списке(на скриншоте), выберите создание своего профиля нажав на кнопку "Add..."
5. Продолжите создание кликнув по кнопку "Add custom profile..."
6. Укажите название, скорость скачивания, скорость загрузки и задержку. Мы указали значения "Медленный интернет", "100 kbit/s", "50 kbit/s" и "10 ms" соответственно.
7. Нажмите кнопку "Add".
8. После выберите созданный профиль из выпадающего списка и перезапустите страницу.
Браузер будет использовать выбранные значения при загрузке страницы. Вы сможете наглядно увидеть за сколько времени страница загружается и какие ресурсы(медиа-файлы) грузятся дольше.
#лайфхак #devtools
Если вы занимаетесь веб разработкой или у вас есть свой сайт, то хорошим навыком будет - научиться проверять скорость загрузки сайта при медленном интернете:
1. Откройте целевой сайт.
2. Зайдите в инструменты разработчика нажав
F12 либо сочетание клавиш Ctrl+Shift+i.3. Перейдите во вкладку "Сеть" / "Network".
4. В выпадающем списке(на скриншоте), выберите создание своего профиля нажав на кнопку "Add..."
5. Продолжите создание кликнув по кнопку "Add custom profile..."
6. Укажите название, скорость скачивания, скорость загрузки и задержку. Мы указали значения "Медленный интернет", "100 kbit/s", "50 kbit/s" и "10 ms" соответственно.
7. Нажмите кнопку "Add".
8. После выберите созданный профиль из выпадающего списка и перезапустите страницу.
Браузер будет использовать выбранные значения при загрузке страницы. Вы сможете наглядно увидеть за сколько времени страница загружается и какие ресурсы(медиа-файлы) грузятся дольше.
#лайфхак #devtools
Наглядное отображение кода в "Dev Tools"
При просмотре исходников сайта в браузере через инструменты разработчика не редкость встретить минифицированную версию файла.
Это где удаляются лишние переносы строк, пробелы и т.п., чтобы уменьшить размер файла. Для такой задачи это конечно отличный вариант, но просматривать такой код становится сложной задачей.
Но вот простой лайфхак как минифицированные файлы привести к читаемому виду. Для этого во вкладке "Sources" необходимо открыть интересующий файл.
В нашем случае это "jquery-ui.min.js", который по умолчанию загружается при просмотре телеграм-канала в браузере по соответствующей ссылке.
После открытия файла необходимо нажать на синюю кнопку "Pretty-print". В результате код с файла преобразуется в отформатированный и более читабельный формат. Наглядно это показано на скриншоте.
#лайфхак #devtools
При просмотре исходников сайта в браузере через инструменты разработчика не редкость встретить минифицированную версию файла.
Это где удаляются лишние переносы строк, пробелы и т.п., чтобы уменьшить размер файла. Для такой задачи это конечно отличный вариант, но просматривать такой код становится сложной задачей.
Но вот простой лайфхак как минифицированные файлы привести к читаемому виду. Для этого во вкладке "Sources" необходимо открыть интересующий файл.
В нашем случае это "jquery-ui.min.js", который по умолчанию загружается при просмотре телеграм-канала в браузере по соответствующей ссылке.
После открытия файла необходимо нажать на синюю кнопку "Pretty-print". В результате код с файла преобразуется в отформатированный и более читабельный формат. Наглядно это показано на скриншоте.
#лайфхак #devtools
Редактирование страницы в браузер в реальном времени
Необязательно лезть в исходный код страницы, чтобы внести туда небольшие изменения: текст, позиции элементов, их количество и т.п. Для этого достаточно выполнить следующие действия:
1. Откройте страницу интересующего сайта.
2. Запустите инструменты разработчика нажав
3. Перейдите во вкладку "Console".
4. Введите указанную команду:
#лайфхак #devtools
Необязательно лезть в исходный код страницы, чтобы внести туда небольшие изменения: текст, позиции элементов, их количество и т.п. Для этого достаточно выполнить следующие действия:
1. Откройте страницу интересующего сайта.
2. Запустите инструменты разработчика нажав
F12 либо сочетание клавиш Ctrl + Shift + i.3. Перейдите во вкладку "Console".
4. Введите указанную команду:
document.designMode='on';
В результате вы сможете прям на странице редактировать текст, удалять и добавлять элементы в активированном режиме дизайна.#лайфхак #devtools
Как сделать скриншот всей страницы сайта?
Этот метод подразумевает использование стандартных инструментов разработчика в браузере, а скриншот делается всей страницы сайта, даже если присутствует вертикальная прокрутка:
1. Откройте интересующую страницу. Например: t.me/s/bugfeature
2. Далее необходимо запустить инструменты разработчика.
3. В них открыть вкладку "Elements".
4. Следом нажать правой кнопкой мыши по тегу
5. Выбрать пункт "Capture node screenshot".
В результате будет скачен PNG скриншот интерфейса телеграм-канала в браузере с 20 последними постами, которые подгружаются изначально при открытии ссылки.
Примечание: Если на сайте организована динамическая подгрузка контента, то сначала необходимо произвести её(скролл, клик по кнопке), а после вернуться к пункту 4 в посте.
#лайфхак #devtools
Этот метод подразумевает использование стандартных инструментов разработчика в браузере, а скриншот делается всей страницы сайта, даже если присутствует вертикальная прокрутка:
1. Откройте интересующую страницу. Например: t.me/s/bugfeature
2. Далее необходимо запустить инструменты разработчика.
3. В них открыть вкладку "Elements".
4. Следом нажать правой кнопкой мыши по тегу
<html>.5. Выбрать пункт "Capture node screenshot".
В результате будет скачен PNG скриншот интерфейса телеграм-канала в браузере с 20 последними постами, которые подгружаются изначально при открытии ссылки.
Примечание: Если на сайте организована динамическая подгрузка контента, то сначала необходимо произвести её(скролл, клик по кнопке), а после вернуться к пункту 4 в посте.
#лайфхак #devtools
Как открывать браузер с запущенными инструментами разработчика сразу?
Если вы занимаетесь web-разработкой и при запуске браузера всегда включаете "Dev Tools", то это можно автоматизировать при помощи нескольких действий:
1. На рабочем столе создайте копию ярлыка браузера "Chrome".
2. Нажмите правой кнопкой мыши по ярлыку и выберите пункт "Свойства".
3. Там перейдите во вкладку "Ярлык".
4. В поле "Объект" прописан путь к вашему браузеру. В самом конце поля(после кавычки) добавьте пробел и допишите флаг
После этих действий запустите браузер нажав дважды по созданному ярлыку. Откроется главная страница браузера с открытыми инструментами разработчика.
#лайфхак #devtools
Если вы занимаетесь web-разработкой и при запуске браузера всегда включаете "Dev Tools", то это можно автоматизировать при помощи нескольких действий:
1. На рабочем столе создайте копию ярлыка браузера "Chrome".
2. Нажмите правой кнопкой мыши по ярлыку и выберите пункт "Свойства".
3. Там перейдите во вкладку "Ярлык".
4. В поле "Объект" прописан путь к вашему браузеру. В самом конце поля(после кавычки) добавьте пробел и допишите флаг
--auto-open-devtools-for-tabs
5. Кликните на кнопку "Применить".После этих действий запустите браузер нажав дважды по созданному ярлыку. Откроется главная страница браузера с открытыми инструментами разработчика.
#лайфхак #devtools
Как скопировать все изменения стилей в инструментах разработчика?
Если вы занимаетесь веб разработкой, то определенно сталкивались с ситуацией, когда различным элементам страницы добавляете свои стили, а потом не можете найти их.
Вот в такой момент отличным спасением является отображение всех изменений стилей во вкладке "Changes", как показано на скриншоте.
Потому что все изменения можно просто скопировать и вставить в редактор с исходниками сайта. При этом не выискивая каждый добавленный стиль у различных элементов.
Правда этот функционал отключен по умолчанию. Для включения необходимо в инструментах разработчика нажать на три точки слева вверху и в разделе "More tools" выбрать "Changes".
#лайфхак #devtools
Если вы занимаетесь веб разработкой, то определенно сталкивались с ситуацией, когда различным элементам страницы добавляете свои стили, а потом не можете найти их.
Вот в такой момент отличным спасением является отображение всех изменений стилей во вкладке "Changes", как показано на скриншоте.
Потому что все изменения можно просто скопировать и вставить в редактор с исходниками сайта. При этом не выискивая каждый добавленный стиль у различных элементов.
Правда этот функционал отключен по умолчанию. Для включения необходимо в инструментах разработчика нажать на три точки слева вверху и в разделе "More tools" выбрать "Changes".
#лайфхак #devtools
Как открыть инструменты разработчика у инструментов разработчика?
Да, вы верно прочитали. У "Dev Tools" в браузере можно вызвать свои "Dev Tools" и так у каждого последующего инструмента. Просто делается это не самым очевидным способом.
Для начала необходимо запустить ваш браузер, а в нем открыть инструменты разработчика клавишей
После этого нажать на троеточие и выбрать расположение инструментов разработчика в отдельном окне. Иконка показана на скриншоте.
После этого достаточно нажать повторно выше указанные сочетания клавиш и у открытых "Dev Tools" откроются свои "Dev Tools" с возможностью редактирования HTML, добавления стилей и прочим функционалом.
#лайфхак #devtools
Да, вы верно прочитали. У "Dev Tools" в браузере можно вызвать свои "Dev Tools" и так у каждого последующего инструмента. Просто делается это не самым очевидным способом.
Для начала необходимо запустить ваш браузер, а в нем открыть инструменты разработчика клавишей
F12 либо сочетанием Ctrl+Shift+i.После этого нажать на троеточие и выбрать расположение инструментов разработчика в отдельном окне. Иконка показана на скриншоте.
После этого достаточно нажать повторно выше указанные сочетания клавиш и у открытых "Dev Tools" откроются свои "Dev Tools" с возможностью редактирования HTML, добавления стилей и прочим функционалом.
#лайфхак #devtools
Как сделать скриншот отдельного блока сайта?
Раннее мы рассказывали о методе создания скриншота всей страницы сайта без сторонних расширений и приложений. Особенность метода в том, что он работал даже если на сайте присутствовала большая прокрутка страницы.
Текущая фишка связана с методом описанным в том посте. Разница лишь в том, что в панели "Elements" необходимо выбирать не сам тег
А так как каждый блок с исходников подсвечивается и на самой странице, как показано на скриншоте, то даже рядовому пользователю будет удобно просматривать зону скриншота.
#лайфхак #devtools
Раннее мы рассказывали о методе создания скриншота всей страницы сайта без сторонних расширений и приложений. Особенность метода в том, что он работал даже если на сайте присутствовала большая прокрутка страницы.
Текущая фишка связана с методом описанным в том посте. Разница лишь в том, что в панели "Elements" необходимо выбирать не сам тег
<html> страницы, а любой блок. Например <div>, <table> , <section> и т.п.А так как каждый блок с исходников подсвечивается и на самой странице, как показано на скриншоте, то даже рядовому пользователю будет удобно просматривать зону скриншота.
#лайфхак #devtools
Запуск Firefox в приватном режиме
Открыть стандартное окно браузера и переключиться в приватный режим через сочетание клавиш
Но если вы это делаете с регулярной периодичностью, то удобней просто один раз настроить ярлык запуска браузера под себя.
Для этого зажмите клавишу
В самом конце, после закрывающихся кавычек, добавьте пробел и ключ "
#лайфхак #firefox #devtools
Открыть стандартное окно браузера и переключиться в приватный режим через сочетание клавиш
Ctrl + Shift + P не является трудоемким процессом. Но если вы это делаете с регулярной периодичностью, то удобней просто один раз настроить ярлык запуска браузера под себя.
Для этого зажмите клавишу
ALT и дважды кликните по ярлыку. Откроется окно свойств. В поле "Объект" указан путь для запуска браузера.В самом конце, после закрывающихся кавычек, добавьте пробел и ключ "
--private". После этого нажмите "Применить" и кликните 2 раза по ярлыку. Браузер откроется в приватном режиме.#лайфхак #firefox #devtools
Как отфильтровать файлы по размеру в инструментах разработчика?
Представьте ситуацию, что ваш сайт очень долго грузится. Вы просматриваете какие он ресурсы подгружает, и замечаете там файлы слишком большого объема.
Но вот как понять сколько их там? Как отфильтровать только большие файлы? В стандартных инструментах разработчика помимо сортировки файлов по убыванию/возрастанию есть еще и мало известный фильтр.
Чтобы им воспользоваться в инструментах разработчика во вкладке "Network" в поле фильтр необходимо указать "
На скрине указано значение в 100000 байт, что эквивалентно 100 килобайтам. Вы же можете указывать свои значения, например "100kb" или "0.1mb".
#лайфхак #devtools
Представьте ситуацию, что ваш сайт очень долго грузится. Вы просматриваете какие он ресурсы подгружает, и замечаете там файлы слишком большого объема.
Но вот как понять сколько их там? Как отфильтровать только большие файлы? В стандартных инструментах разработчика помимо сортировки файлов по убыванию/возрастанию есть еще и мало известный фильтр.
Чтобы им воспользоваться в инструментах разработчика во вкладке "Network" в поле фильтр необходимо указать "
larger-than:N", где вместо "N" указать минимальный размер файла. На скрине указано значение в 100000 байт, что эквивалентно 100 килобайтам. Вы же можете указывать свои значения, например "100kb" или "0.1mb".
#лайфхак #devtools
