Ниједна веб локација није направљена савршено. Као и сви производи направљени од стране људи, грешке кода су део процеса. Због тога је важно да темељно тестирате сваку нову веб локацију коју направите како бисте били сигурни да нема грешака што је више могуће како бисте корисницима пружили најбоље могуће искуство. 

Не би требало да тестирате веб локацију а да прво не испробате^(DevTools) комплет алата за развој Гоогле Цхроме^(Chrome) -а . Режим Цхроме^(Chrome) програмера вам омогућава да испробате и темељно тестирате нови сајт (или постојећи) да бисте пронашли и исправили грешке. Такође вам може дати увид у то како се покрећу друге веб локације, укључујући преглед изворног кода. 

Ево свега што треба да знате о режиму програмера претраживача Гоогле Цхроме^{(Google Chrome)} , које алате има и како да га ефикасно користите.

Шта је Цхроме режим програмера?^{(What Is Chrome Developer Mode?)}

Када говоримо о Цхроме^(Chrome) режиму програмера, не говоримо о истом режиму програмера^{(same developer mode)} који ћете видети на Цхромебоок^{(Chromebooks)} -овима . Оно на шта мислимо су опсежни алати за развој Цхроме -а (који се називају ^(Chrome)Гоогле ДевТоолс^{(Google DevTools)} ) који су уграђени у сам прегледач.

Ово су алатке дизајниране да тестирају, анализирају и намерно разбију (ако је потребно) веб страницу коју сте учитали у прегледач Гоогле Цхроме^{(Google Chrome)} ради тестирања. На основном нивоу, можете користити ДевТоолс^(DevTools) да видите изворни код за веб локацију, што вам омогућава да завирите испод хаубе да видите како је веб локација направљена и колико добро ради.

Међутим, Гоогле ДевТоолс^{(Google DevTools)} нуди више од овога. Можете да користите Цхроме^(Chrome) режим програмера да промените страницу након што се учита, покренете команде Гоогле Цхроме^{(Google Chrome)} конзоле да контролишете страницу и манипулишете њом, као и да покренете тестове брзине и мреже да бисте надгледали веб саобраћај.

Такође можете да емулирате друге уређаје, укључујући различите оперативне системе и резолуције екрана, у режиму Цхроме ДевТоолс^{(Chrome DevTools)} . Ово вам омогућава да видите да ли веб локација има респонзивни веб дизајн и где ће се садржај и изглед сајта променити у зависности од резолуције или типа уређаја.

Иако су ови алати намењени професионалним веб програмерима или тестерима, такође је згодно за стандардне кориснике Цхроме^(Chrome) - а да се сналазе у пакету ДевТоолс^(DevTools) . Ако видите проблем са сајтом који не можете да решите, прелазак на режим Цхроме^(Chrome) програмера може вам помоћи да видите да ли је проблем са сајтом или са вашим прегледачем.

Како приступити Гоогле Цхроме ДевТоолс менију^{(How To Access Google Chrome DevTools Menu)}

Постоји неколико начина на које можете да приступите менију Гоогле Цхроме ДевТоолс^{(Google Chrome DevTools)} , у зависности од алата који желите да користите.

Најлакши начин да то урадите је из менија Гоогле Цхроме- а. ^{(Google Chrome)}Да бисте то урадили, кликните на икону менија са три тачке^{(three-dots menu icon)} у горњем десном углу. У менију који се појави кликните на More Tools > Developer Tools .

Ово ће отворити комплет ДевТоолс^(DevTools) у новом менију на десној страни ваше отворене Цхроме^(Chrome) картице или прозора.

То можете учинити и коришћењем пречица на тастатури. Са Виндовс^(Windows) или Линук рачунара^{(Linux PC)} отворите Цхроме^(Chrome) претраживач и притисните тастер Ф12^{(F12 )} . Такође можете да притиснете Ctrl + Alt + J или Ctrl + Alt + I на отвореној картици или прозору Цхроме -а.^(Chrome)

На мацОС-у притисните Ф12^(F12) или притисните тастере Option + Command + J или Option + Command + I да бисте уместо тога отворили Цхроме ДевТоолс^{(Chrome DevTools)} мени. Ово ће отворити Цхроме^(Chrome) конзолу, са опцијама за прелазак на друге Цхроме^(Chrome) алате на врху менија ДевТоолс^(DevTools) .

Ако желите, можете да видите изворни код за веб локацију (отварајући картицу Елементи^(Elements) у менију ДевТоолс^(DevTools) у процесу) на било којој отвореној веб страници тако што ћете кликнути десним тастером миша на и кликнути на опцију Инспецт^{(Inspect )} .

Коришћење Цхроме ДевТоолс-а^{(Using Chrome DevTools)}

Као што смо се укратко дотакли, можете да користите Цхроме ДевТоолс^{(Chrome DevTools)} комплет да видите изворни код за веб локацију на картици Елементи^(Elements) . Омогућиће вам да анализирате код иза странице коју сте учитали, као и да видите поруке о грешци (које указују на проблеме са учитавањем сајта) у Цхроме^(Chrome) конзоли на картици Конзола^(Console) .

Такође можете да видите различите изворе садржаја са веб локације на картици Извори^(Sources) . На пример, ако сајт користи мрежу за испоруку садржаја (ЦДН)^{(using a content delivery network (CDN))} , медији са сајта би овде били наведени као други извор.

Режим Цхроме^(Chrome) програмера вам омогућава да директно преузмете тај садржај или да извршите сложенију анализу садржаја.

Ако желите да тестирате какав је учинак сајта, можете пратити и снимити употребу мреже на картици Мрежа^(Network) . Ово ће показати брзину, величину и тип мрежних захтева између вашег претраживача и сајта.

На пример, када се страница први пут учита, сајт ће сам учитати садржај странице, али такође може да захтева податке из база података трећих страна. На пример, када се пријавите, ово може да постави упит за базу података која би се овде приказала као мрежни захтев.

Ово можете даље анализирати на картици Перформансе^{(Performance )} , где можете дубље да снимите употребу Цхроме^(Chrome) претраживача, укључујући снимање снимака екрана на различитим местима. Ово ће забележити колико је времена потребно да се ваша веб локација учита ради даље анализе.

Гоогле Цхроме има репутацију да тешко утиче на меморију вашег рачунара , тако да можете да тестирате коришћење ^{(being hard on your PC memory)}ЈаваСцрипт^(JavaScript) меморије вашег сајта на картици Меморија^(Memory) . Овде се могу користити различити профили за Цхроме тестирање, са додатним информацијама о овом тестирању на ^{(Different Chrome)}страници са документацијом Цхроме ДевТоолс^{(Chrome DevTools documentation page)} .

За детаљнију анализу садржаја вашег сајта, као и било које меморије претраживача коју можда користи (на пример, за евидентирање података), можете претраживати преко картице Апликација . ^{(Application)}Можете да видите информације о колачићима сајта овде у одељку Колачићи^(Cookies) или да обришете меморију која се користи кликом на опцију Обриши складиште .^{(Clear storage)}

Ако сте забринути за безбедност вашег сајта, можете да проверите колико добро функционише на картици Безбедност^{(Security )} . Ово ће вам дати брзи преглед Цхроме-ове безбедносне анализе за страницу, укључујући да ли страница има исправан и поуздан ССЛ^(SSL) сертификат.

Ако желите да генеришете извештај о учинку вашег сајта, укључујући да ли испуњава типичне корисничке стандарде и да ли учинак сајта може да утиче на оптимизацију претраживача, можете да кликнете на картицу Светионик^(Lighthouse) . Ово нуди подешавања која можете да проверите или опозовете за свој извештај—кликните на Генериши извештај^{(Generate report)} да бисте креирали извештај за преглед.

Ово једва загреба површину потенцијала који Цхроме^(Chrome) режим програмера може да донесе програмерима. Ако желите да сазнате више, документација Цхроме ДевТоолс-а^{(Chrome DevTools documentation)} би требало да вам помогне са алаткама и функцијама које су у понуди, укључујући како да са њом направите сопствене корисничке тестове. 

Напредни Гоогле Цхроме трикови^{(Advanced Google Chrome Tricks)}

Већина корисника Цхроме-а никада неће знати да комплет Гоогле Цхроме ДевТоолс^{(Google Chrome DevTools)} постоји у њиховом претраживачу, али за напредне кориснике, он остаје изузетно користан начин за тестирање и анализу веб локација. Постоје и Цхроме екстензије независних произвођача за веб програмере^{(Chrome extensions for web developers)} који ће вам помоћи да додатно тестирате вашу веб локацију.

Ако правите основну веб локацију^{(building a basic website)} , прелазак на режим Цхроме^(Chrome) програмера може вам помоћи да уочите грешке на сајту које нису одмах видљиве. Ово можете да урадите само ако Цхроме^(Chrome) ради исправно, па ако имате проблема са рушењем Цхроме-а^{(struggling with Chrome crashes)} , можда ћете морати прво да ресетујете или поново инсталирате прегледач.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built рerfectly. Like all products made by humans, code errors are part of the process. That’s why it’s important to thoroughly test any new website you bυild to make sure that it’s as free of errorѕ as 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

• Гоогле Цхроме аутоматско попуњавање: Потпуни водич

• 10 најбољих додатака за приватност за Цхроме (2022)

• Користите ова 4 Цхроме додатка да шифрујете своје Гмаил поруке

• Подешавања садржаја Гоогле Цхроме-а: Потпуни водич

• Која је најбоља услуга конференцијских позива – најбоље апликације у поређењу

• Шта је Мицрософт Повер Аутомате и бесплатни шаблони за преузимање

• Најбољи временски виџети за Виндовс 10/11

• Запиер парсер е-поште: 3 креативна начина да га користите

• 3 алата за дијагностицирање и решавање проблема са вашим монитором

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

• Аваст Онлине Сецурити Ектенсион: Да ли га вреди користити?

• 5 најбољих Фирефок додатака за приватност за безбедност на мрежи

• 5 најбољих апликација за филтер плаве светлости за Виндовс, Мац и Линук

• Како уклонити дупликате дигиталних фотографија на вашем Виндовс рачунару

• Тестови мртвих пиксела да поправите заглављени пиксел на вашем монитору

• Најбоље 4 алтернативе за Гоогле Цхромецаст

• 7 начина за отварање МДБ датотеке без Мицрософт Аццесс-а

• 4 најбоље софтверске апликације за прослеђивање портова и како их користити

• Најбољи услужни програми за подешавање процесора, видео картица и РАМ-а

• Два алата за транскрипцију за претварање звука у текст