Никой уебсайт не е изграден перфектно. Както всички продукти, направени от хора, грешките в кода са част от процеса. Ето защо е важно да тествате задълбочено всеки нов уебсайт, който създавате, за да сте сигурни, че е възможно най-без грешки, за да предоставите на потребителите си възможно най-доброто изживяване. 

Не трябва да тествате уеб сайт, без първо да изпробвате комплекта DevTools на Google Chrome . Режимът за разработчици на 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 , за да промените страница, след като е заредена, да стартирате конзолни команди на ^(Chrome)Google Chrome , за да контролирате и манипулирате страницата, както и да изпълнявате тестове за скорост и мрежа, за да наблюдавате уеб трафика.

Можете също да емулирате други устройства, включително различни операционни системи и резолюции на екрана, в режима на Chrome DevTools . Това ви позволява да видите дали даден сайт има адаптивен уеб дизайн и къде съдържанието и оформленията на сайта ще се променят в зависимост от разделителната способност или типа на устройството.

Въпреки че тези инструменти са насочени към професионални уеб разработчици или тестери, също така е удобно за стандартните потребители на Chrome да се ориентират в пакета ^(Chrome)DevTools . Ако видите проблем със сайт, който не можете да разрешите, превключването към режим за разработчици на Chrome може да ви помогне да видите дали проблемът е в сайта или в браузъра ви.

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

Има няколко начина, по които можете да получите достъп до менюто DevTools на Google Chrome^{(Google Chrome DevTools)} , в зависимост от инструмента, който искате да използвате.

Най-лесният начин да направите това е от менюто на Google Chrome . За да направите това, щракнете върху иконата на менюто с три точки^{(three-dots menu icon)} в горния десен ъгъл. От менюто, което се показва, щракнете върху More Tools > Developer Tools .

Това ще отвори комплекта DevTools в ново меню от дясната страна на отворения раздел или прозорец на Chrome .

Можете също да направите това с помощта на клавишни комбинации. От компютър с Windows или Linux^{(Linux PC)} отворете браузъра Chrome^(Chrome) и натиснете клавиша F12 . Можете също да натиснете Ctrl + Alt + J или Ctrl + Alt + I в отворен раздел или прозорец на Chrome .

В macOS натиснете F12 или натиснете клавишите Option + Command + J или Option + Command + I за да отворите менюто Chrome DevTools вместо това. Това ще отвори конзолата на Chrome с опции за преминаване към други инструменти на Chrome в горната част на менюто DevTools .

Ако искате, можете да видите изходния код за уебсайт (отваряйки раздела Елементи^(Elements) на менюто DevTools в процеса) на всяка отворена уеб страница, като щракнете с десния бутон върху и щракнете върху опцията Проверка^{(Inspect )} .

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

Както накратко споменахме, можете да използвате комплекта Chrome DevTools , за да видите изходния код за уебсайт в раздела Елементи^(Elements) . Това ще ви позволи да анализирате кода зад страницата, която сте заредили, както и да преглеждате съобщения за грешки (посочващи проблеми със зареждането на сайта) в конзолата на Chrome в раздела ^(Chrome)Конзола^(Console) .

Можете също да видите различните източници за съдържание от уебсайт в раздела Източници^(Sources) . Например, ако даден сайт използва мрежа за доставка на съдържание (CDN)^{(using a content delivery network (CDN))} , медиите от даден сайт ще бъдат посочени като различен източник тук.

Режимът за разработчици на Chrome^(Chrome) ви позволява да изтегляте това съдържание директно или да извършвате по-сложен анализ на съдържанието.

Ако искате да тествате как се представя даден сайт, можете да наблюдавате и записвате използването на вашата мрежа в раздела Мрежа^(Network) . Това ще покаже скоростта, размера и вида на мрежовите заявки, направени между вашия браузър и сайта.

Например, когато една страница се зареди за първи път, сайтът ще зареди самото съдържание на страницата, но може също да изисква данни от бази данни на трети страни. Например, когато влезете, това може да поиска база данни, която ще се покаже като мрежова заявка тук.

Можете да анализирате това допълнително в раздела Ефективност^{(Performance )} , където можете да записвате използването на браузъра Chrome в по-голяма дълбочина, включително да записвате екранни снимки в различни точки. Това ще регистрира колко време отнема зареждането на вашия сайт за по-нататъшен анализ.

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

За по-задълбочен анализ на съдържанието на вашия сайт, както и на всяко хранилище на браузъра, което може да използва (например за регистриране на данни), можете да търсите в раздела Приложение^{(Application)} . Можете да видите информацията за бисквитките на сайта тук в секцията Бисквитки^(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 wеbsite is built perfectly. Like all products madе by humans, code errоrs are part of the process. That’s why it’s important to thoroυghly teѕt any new website you build to make sure that it’s as free of errors as pоssible 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 Windows алтернативи на командата sudo на Linux

• Как да блокирате сайтове с безплатен софтуер за родителски контрол

• Как да проверите дали температурата на вашия процесор е твърде висока

• Най-добрите приложения за наблюдение на използването на интернет

• Разширение за онлайн сигурност на Avast: Струва ли си да се използва?

• 11 най-добър безплатен софтуер за екранни снимки за Windows

• Урок за Microsoft Planner: Всичко, което трябва да знаете

• Как настолното приложение Signal може да помогне за защитата на вашата поверителност

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

• 5 най-добри безопасни сайтове за изтегляне на APK за приложения за Android

• Работи ли Windows File Recovery на Microsoft? Тествахме го.

• 5 най-добри добавки за поверителност на Firefox за онлайн безопасност

• 5 най-добри софтуерни програми за управление на двойни монитори

• Какво е чат бот и как да го използвате на сайта си

• Как работят уебсайтовете: Научете какво има под капака