Ни один веб-сайт не создан идеально. Как и все продукты, созданные людьми, ошибки кода являются частью процесса. Вот почему важно тщательно тестировать любой новый веб-сайт, который вы создаете, чтобы убедиться, что он не содержит ошибок, насколько это возможно, чтобы предоставить вашим пользователям наилучшие возможности. 

Вы не должны тестировать веб-сайт, не попробовав сначала набор инструментов Google ^(DevTools)Chrome DevTools . Режим разработчика Chrome^(Chrome) позволяет опробовать и тщательно протестировать новый сайт (или существующий), чтобы найти и исправить ошибки. Это также может дать вам представление о том, как работают другие сайты, включая просмотр исходного кода. 

Вот все, что вам нужно знать о режиме разработчика браузера Google Chrome , о том, какие у него есть инструменты и как их эффективно использовать.

Что такое режим разработчика Chrome?^{(What Is Chrome Developer Mode?)}

Когда мы говорим о режиме разработчика Chrome , мы не говорим о том же режиме разработчика,^{(same developer mode)} который вы увидите на Chromebook^{(Chromebooks)} . Мы имеем в виду обширные инструменты разработки Chrome (называемые Google DevTools ), которые встроены в сам браузер.

Это инструменты, предназначенные для тестирования, анализа и преднамеренного взлома (при необходимости) веб-страницы, которую вы загрузили в браузере Google Chrome для целей тестирования. На базовом уровне вы можете использовать DevTools для просмотра исходного кода веб-сайта, позволяя вам заглянуть внутрь, чтобы увидеть, как сайт был создан и насколько хорошо он работает.

Однако Google DevTools^{(Google DevTools)} предлагает больше, чем это. Вы можете использовать режим разработчика Chrome для изменения страницы после ее загрузки, запускать команды консоли Google Chrome для управления страницей и управления ею, а также запускать тесты скорости и сети для мониторинга веб-трафика.

Вы также можете эмулировать другие устройства, включая различные операционные системы и разрешения экрана, в режиме Chrome DevTools . Это позволяет увидеть, имеет ли сайт адаптивный веб-дизайн, и где содержание и макеты сайта будут меняться в зависимости от разрешения или типа устройства.

Хотя эти инструменты предназначены для профессиональных веб-разработчиков или тестировщиков, обычным пользователям Chrome также удобно ознакомиться с пакетом ^(Chrome)DevTools . Если вы видите проблему с сайтом, которую не можете решить, переключение в режим разработчика Chrome может помочь вам понять, связана ли проблема с сайтом или с вашим браузером.

Как получить доступ к меню Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Есть несколько способов получить доступ к меню Google Chrome DevTools , в зависимости от инструмента, который вы хотите использовать.

Самый простой способ сделать это — через меню Google Chrome . Для этого щелкните значок меню из трех точек^{(three-dots menu icon)} в правом верхнем углу. В появившемся меню нажмите « More Tools > Developer Tools .

Это откроет набор DevTools в новом меню в правой части открытой вкладки или окна Chrome .

Вы также можете сделать это, используя сочетания клавиш. На ПК с Windows или Linux^{(Linux PC)} откройте браузер Chrome и нажмите клавишу F12 . Вы также можете нажать Ctrl + Alt + J или Ctrl + Alt + I в открытой вкладке или окне Chrome .

В macOS нажмите F12 или нажмите клавиши Option + Command + J или Option + Command + IChrome DevTools . Откроется консоль Chrome с возможностью перехода к другим инструментам Chrome в верхней части меню DevTools .

Если вы хотите, вы можете просмотреть исходный код для веб-сайта (открыв вкладку « Элементы » в меню « ^(Elements)Инструменты разработчика»^(DevTools) в процессе) на любой открытой веб-странице, щелкнув правой кнопкой мыши и выбрав параметр « Проверить^{(Inspect )} ».

Использование Chrome DevTools^{(Using Chrome DevTools)}

Как мы кратко упомянули, вы можете использовать набор Chrome DevTools , чтобы увидеть исходный код веб-сайта на вкладке « Элементы ». ^(Elements)Это позволит вам проанализировать код загруженной вами страницы, а также просмотреть сообщения об ошибках (указывающие на проблемы с загрузкой сайта) в консоли Chrome на вкладке « Консоль ».^(Console)

Вы также можете просмотреть различные источники контента с веб-сайта на вкладке « Источники ». ^(Sources)Например, если сайт использует сеть доставки контента (CDN)^{(using a content delivery network (CDN))} , мультимедиа с сайта будут указаны здесь как другой источник.

Режим разработчика Chrome^(Chrome) позволяет загружать этот контент напрямую или выполнять более сложный анализ контента.

Если вы хотите проверить, как работает сайт, вы можете отслеживать и записывать использование сети на вкладке « Сеть ». ^(Network)Это покажет скорость, размер и тип сетевых запросов между вашим браузером и сайтом.

Например, при первой загрузке страницы сайт сам загружает содержимое страницы, но также может запрашивать данные из сторонних баз данных. Например, когда вы входите в систему, это может запросить базу данных, которая будет отображаться здесь как сетевой запрос.

Вы можете проанализировать это далее на вкладке « Производительность^{(Performance )} », где вы можете более подробно записывать использование браузера Chrome , включая запись снимков экрана в разных точках. ^(Chrome)Это будет регистрировать, сколько времени потребуется для загрузки вашего сайта для дальнейшего анализа.

Google Chrome имеет репутацию требовательного к памяти вашего ПК^{(being hard on your PC memory)} , поэтому вы можете проверить использование памяти JavaScript вашим сайтом на вкладке Память . ^(Memory)Здесь можно использовать различные профили тестирования Chrome , а дополнительную информацию об этом тестировании можно найти на ^{(Different Chrome)}странице документации Chrome DevTools^{(Chrome DevTools documentation page)} .

Для более глубокого анализа содержимого вашего сайта, а также любого хранилища браузера, которое он может использовать (например, для регистрации данных), вы можете выполнить поиск на вкладке « Приложение ». ^{(Application)}Вы можете просмотреть информацию о файлах cookie сайта здесь, в разделе « Файлы cookie^(Cookies) », или очистить используемое хранилище, щелкнув параметр « Очистить хранилище^{(Clear storage)} ».

Если вы беспокоитесь о безопасности своего сайта, вы можете проверить, насколько хорошо он работает, на вкладке « Безопасность ». ^{(Security )}Это даст вам краткий обзор анализа безопасности страницы в Chrome, включая информацию о том, имеет ли страница правильный и надежный SSL - сертификат.

Если вы хотите создать отчет о производительности вашего сайта, в том числе о том, соответствует ли он типичным пользовательским стандартам и может ли производительность сайта повлиять на поисковую оптимизацию, вы можете щелкнуть вкладку Lighthouse . Это предлагает настройки, которые вы можете установить или снять для своего отчета — нажмите « Создать отчет»^{(Generate report)} , чтобы создать отчет для просмотра.

Это едва затрагивает потенциал, который режим разработчика Chrome может дать разработчикам. Если вы хотите узнать больше, документация Chrome DevTools^{(Chrome DevTools documentation)} должна помочь вам с предлагаемыми инструментами и функциями, в том числе с тем, как создавать с ее помощью собственные пользовательские тесты. 

Продвинутые хитрости Google Chrome^{(Advanced Google Chrome Tricks)}

Большинство пользователей Chrome никогда не узнают, что в их браузере существует набор Google Chrome DevTools , но для опытных пользователей он остается исключительно полезным способом тестирования и анализа веб-сайтов. Существуют также сторонние расширения Chrome для веб-разработчиков^{(Chrome extensions for web developers)} , которые помогут дополнительно протестировать ваш сайт.

Если вы создаете простой веб-сайт^{(building a basic website)} , переключение в режим разработчика Chrome может помочь вам обнаружить ошибки на вашем сайте, которые не видны сразу. Вы можете сделать это только в том случае, если Chrome работает правильно, поэтому, если вы боретесь со сбоями Chrome^{(struggling with Chrome crashes)} , вам может потребоваться сначала сбросить настройки или переустановить браузер.

What Is Chrome Developer Mode & What Are Its Uses?

No website іs built perfectly. Like all products made by humans, code errors arе part оf the process. That’s why it’s important to thoroughly test any new website yоu build to make sure that it’s as free of errorѕ aѕ possible to give your users the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Автозаполнение Google Chrome: полное руководство

• 10 лучших расширений конфиденциальности для Chrome (2022 г.)

• Используйте эти 4 плагина Chrome для шифрования сообщений Gmail

• Настройки контента Google Chrome: полное руководство

• Что такое лучший сервис конференц-связи - сравнение лучших приложений

• 5 лучших безопасных сайтов для скачивания APK для приложений Android

• Как удалить дубликаты цифровых фотографий на вашем компьютере с Windows

• Как заблокировать сайты с помощью бесплатного программного обеспечения для родительского контроля

• Лучшие редакторы Markdown: все платформы и онлайн

• 3 инструмента для диагностики и устранения проблем с монитором

• 5 лучших надстроек конфиденциальности Firefox для онлайн-безопасности

• Редактор скриптов Google Apps: все, что вам нужно знать, чтобы начать работу

• Как приложение Signal для ПК может защитить вашу конфиденциальность

• 4 лучших приложения для переадресации портов и способы их использования

• Расширение Avast Online Security: стоит ли его использовать?

• Два инструмента транскрипции для преобразования аудио в текст

• Автоматически перемещать, удалять или копировать файлы в Windows

• 5 лучших программ для управления двумя мониторами

• Лучшие утилиты для настройки процессора, видеокарты и оперативной памяти

• Как легко копировать DVD и Blu-Ray с помощью MakeMKV