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

Савети за алатке за развој Цхроме-а

Постоји много непознатих и скривених трикова Цхроме Дев Тоолс^{(Chrome Dev Tools)} -а и ми ћемо тражити најкорисније трикове међу њима. Да бисте отворили алатке за програмере у Цхроме^(Chrome) -у , притисните Ф12^(F12) на тастатури и испробајте следеће трикове.

1. Пронађите и отворите било коју датотеку

Када радимо веб развој, бавимо се многим ХТМЛ^(HTML) , ЦСС^(CSS) , ЈС и другим датотекама. Када желимо било шта да отклонимо грешке, отварамо алатке Цхроме Дев . ^{(Chrome Dev)}Можете брзо претраживати и пронаћи одређену датотеку да бисте олакшали свој посао. Само^(Just) притисните Ctrl + P и почните да куцате име датотеке. Ово вам помаже да пронађете одређену датотеку са листе датотека.

2. Претражите унутар изворне датотеке

У претходном трику сазнали смо како да тражимо одређену датотеку. Можете чак тражити одређени стринг у свим учитаним датотекама. Притисните Ctrl + Shift + F да бисте потражили низ у датотекама. Такође подржава регуларне изразе.

3. Идите на одређену линију

Када отворите било коју изворну датотеку и желите да пређете на одређени ред, притисните Ctrl + G и дајте број линије и притисните ентер.

4. Избор ДОМ елемената на картици Конзола^(Console)

Дев Тоолс^{(Dev Tools)} вам такође омогућава да изаберете елементе у конзоли.

• $() – Враћа^(Returns) прво појављивање одговарајућег ЦСС^(CSS) селектора.
• $$() – Враћа низ елемената који одговарају датом ЦСС^(CSS) селектору.

За више команди конзоле, пређите на овај пост.^{(this post.)}

5. Искористите више карета

Понекад желите да поставите више карата на различита места и то можете лако да урадите у алаткама Цхроме Дев^{(Chrome Dev)} тако што ћете држати тастер Цтрл^{(Ctrl )} и кликнути где желите да их поставите. Затим почните да пишете и видећете да је постављено на различитим изабраним местима.

6. Чување дневника

Чување^(Preserve) дневника вам помаже да сачувате евиденцију чак и када је страница учитана. Означите опцију поред Сачувај евиденцију^{(Preserve log )} у дневнику конзоле^(Console) и евиденција је сачувана. Ово приказује евиденцију пре него што је страница неучитана и помаже у истраживању грешака.

7. Користите уграђени код за улепшавање

Цхроме Дев Тоолс^{(Chrome Dev Tools)} има уграђени алат за улепшавање кода који се зове прилично принт „{}“^{(pretty print “{}”)} . Алат за програмере показује минимизирани код и није га тако лако читати. Кликните^(Click) на дугме за лепо штампање које је приказано у доњем левом углу отворене изворне датотеке да бисте приказали изворну датотеку у формату који је читљив.

8. Да ли је ваша веб локација прилагођена мобилним уређајима? Проверите овде

Цхроме алатке за^{(Chrome Dev Tools)} програмере нам такође омогућавају да проверимо да ли је веб локација прилагођена мобилним уређајима или не. Можете проверити како ваша веб локација изгледа на различитим уређајима. Пређите на Цхроме Дев^{(Chrome Dev)} алате и на картици Емулација^{(Emulation )} можете да архивирате различите уређаје. Изаберите уређај који желите и тестирајте како ваша веб локација изгледа на том уређају.

За више информација, погледајте следећи видео.

9. Емулирајте сензоре и географску локацију^{(Geographical Location)}

Можете чак и емулирати сензоре као што су екрани на додир и акцелерометри. Можете чак и опонашати географску локацију. Да бисте то урадили, идите на Emulation -> Sensors.

10. Изаберите следеће појављивање тренутне речи

Ако желите да замените реч у целом њеном појављивању, изаберите реч и притисните Ctrl + D да бисте изабрали следеће појављивање изабране речи. Затим можете уредити ту реч у свим њеним појављивањима у једном кадру.

11. Промените формат боје

Само користите Shift + Click на преглед боја да промените измене између ргба, хексадецималног и хсл форматирања.

12. Додајте^(Add) измене у локалне датотеке преко радног простора

У могућности смо да уређујемо изворне датотеке и уносимо неке измене у ЦСС^(CSS) , ЈаваСцрипт^(JavaScript) и друге датотеке у алаткама Цхроме Дев . ^{(Chrome Dev)}Да бисте додали ове промене у локалне датотеке, нема потребе да копирате и налепите промене из радног простора у датотеке на диску. Цхроме^{(Chrome Dev)} алатке за програмере вам омогућавају да ускладите датотеке и ажурирате локалну датотеку са променама које сте урадили у алаткама за програмере. Да бисте то урадили, кликните десним тастером миша на изворну датотеку са леве стране на картици Извори^{(Sources )} и изаберите Додај фасциклу у радни простор.^{(Add Folder to workspace.)}

Надам се да ово помаже.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web brоwserѕ for web development, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Најбољи Гоогле Цхроме савети и трикови за кориснике Виндовс рачунара

• 3 корисна савета и трикова за коришћење лепљивих белешки

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

• Поново покрените Цхроме, Едге или Фирефок без губитка картица у оперативном систему Виндовс 11/10

• Савети за коришћење Инспецт Елемент прегледача Гоогле Цхроме

• Коју верзију Цхроме-а имам? 6 начина да сазнате -

• Реши проблем: Гоогле Цхроме користи много процесора (ЦПУ) када посетим веб локацију

• 15 најбољих ВПН-а за Гоогле Цхроме за приступ блокираним сајтовима

• Комбинујте све своје налоге е-поште у једно Гмаил пријемно сандуче

• Како поново отворити затворену картицу претраживача у Цхроме-у, Сафарију, Едге-у и Фирефок-у

• Како деблокирати Адобе Фласх Плаиер у Гоогле Цхроме-у -

• Идентификујте фонтове у Цхроме-у, Едге-у и Фирефок-у користећи алатке за програмере

• Обришите податке о сајту за одређени сајт у Цхроме-у или Едге-у помоћу алатки за програмере

• Гоогле Цхроме за Мац: Како да га набавите!

• Како користити емулатор мобилног претраживача у Цхроме-у, Фирефок-у, Едге-у и Опери -

• Како да обришете колачиће из Цхроме-а: Све што треба да знате

• Како да повећам текст у Цхроме-у, Едге-у, Фирефок-у и Опери?

• Како поставити Цхроме као подразумевани претраживач у оперативном систему Виндовс 10 (Фирефок и Опера)

• Како да поправите Нетфлик код грешке М7111-1101

• Ставите Цхроме и друге прегледаче на цео екран (Едге, Фирефок и Опера)