Инструменти за разработка на Chrome Уроци, съвети, трикове

Google Chrome е един от популярните уеб браузъри за уеб разработка, поради своите разширени функции. Инструментите за разработчици на Chrome(Chrome Developer Tools) могат да бъдат много полезни при отстраняване на грешки. Повечето от нас вече знаят, че можем да редактираме живия CSS с помощта на Chrome Dev Tools , но има още съвети, които ще споделим с вас днес.

Съвети и трикове за Chrome Dev Tools

Съвети за инструменти за разработка на Chrome

Има много неизвестни и скрити трикове на Chrome Dev Tools и ние ще разгледаме най-полезните трикове сред тях. За да отворите инструментите за разработчици в Chrome , натиснете F12 на клавиатурата си и изпробвайте следните трикове.

1. Намерете и отворете всеки файл

Когато правим уеб разработка, ние се занимаваме с много HTML , CSS , JS и други файлове. Когато искаме да отстраним грешки, отваряме инструментите за Chrome Dev . Можете бързо да търсите и намирате конкретния файл, за да улесните работата си. Просто(Just) натиснете Ctrl + P и започнете да въвеждате името на файла. Това ви помага да намерите конкретния файл от списъка с файлове.

намерете файлове

2. Търсене в изходния файл

В предишния трик разбрахме как да търсим конкретен файл. Можете дори да търсите конкретен низ във всички заредени файлове. Натиснете Ctrl + Shift + F , за да търсите низ във файлове. Той също така поддържа регулярни изрази.

Търсене във файлове

3. Отидете до определен ред

След като отворите произволен изходен файл и искате да преминете към определен ред, натиснете Ctrl + G и дайте номера на реда и натиснете Enter.

Отидете на линия

4. Избиране на DOM елементи в раздела Конзола(Console)

Dev Tools също ви позволява да избирате елементи в конзолата.

  • $() – Връща(Returns) първото появяване на съответстващия CSS селектор.
  • $$() – Връща масива от елементи, съответстващи на дадения CSS селектор.

Избиране на DOM елементи

За повече команди за конзола, преминете към тази публикация.(this post.)

5. Използвайте няколко карета

Понякога искате да зададете множеството карета на различни места и можете да направите това лесно в инструментите на Chrome Dev , като задържите клавиша Ctrl(Ctrl ) и щракнете върху мястото, където искате да ги поставите. След това започнете да пишете и ще видите, че е поставен на различни избрани места.

Използвайте няколко карета

6. Запазване на дневника

Запазване(Preserve) на дневника ви помага да запазите дневника дори и страницата да е заредена. Отметнете опцията до Запазване на дневника(Preserve log ) в дневника на конзолата(Console) и дневникът ще бъде запазен. Това показва дневника, преди страницата да не се разтовари и е полезно за разследване на грешките.

запазване на дневника

7. Използвайте вграден код за разкрасяване

Инструментите за разработчици на Chrome(Chrome Dev Tools) имат вградения разкрасител на код, наречен красив печат „{}“(pretty print “{}”) . Инструментът за разработчици показва минимизирания код и не е толкова лесен за четене. Щракнете(Click) върху красивия бутон за печат, който е показан в долния ляв ъгъл на отворения изходен файл, за да покажете изходния файл в четим от човека формат.

красив бутон за печат

8. Удобен ли е вашият уебсайт за мобилни устройства? Проверете го тук

Chrome Dev Tools също ни позволява да проверим дали даден уебсайт е удобен за мобилни устройства или не. Можете да проверите как изглежда вашият уебсайт на различни устройства. Преминете към инструментите за Chrome Dev и в раздела Емулация(Emulation ) можете да архивирате различни устройства. Изберете устройството, което искате, и тествайте как изглежда уебсайтът ви на това устройство.

удобен за мобилни устройства

За повече информация вижте следващото видео.

9. Емулирайте сензори и географско местоположение(Geographical Location)

Можете дори да емулирате сензори като сензорни екрани и акселерометри. Можете дори да подражавате на географското местоположение. За да направите това, отидете на Emulation -> Sensors.

емулиране на сензори

10. Изберете следващото появяване на текущата дума

Ако искате да замените думата във всички нейни поява, изберете думата и натиснете Ctrl + D , за да изберете следващото появяване на избраната дума. След това можете да редактирате тази дума във всички нейни поява на един кадър.

Мултиселекция

11. Промяна на цветовия формат

Просто използвайте Shift + Click върху визуализацията на цвета, за да промените промените между rgba, шестнадесетично и hsl форматиране.

цветен формат

12. Добавете(Add) промени към локалните файлове през работното пространство

Ние можем да редактираме изходни файлове и да правим някои промени в CSS , JavaScript и други файлове в инструментите за Chrome Dev . За да добавите тези промени към локалните файлове, няма нужда да копирате и поставяте промените от работното пространство към файловете на диска. Инструментите за Chrome Dev(Chrome Dev) ви позволяват да съпоставяте файловете и да актуализирате локалния файл с промените, които сте направили в инструментите за разработчици. За да направите това, щракнете с десния бутон върху изходния файл от лявата страна на раздела Източници(Sources ) и изберете Добавяне на папка към работното пространство.(Add Folder to workspace.)

Надявам се това да помогне.



Андон Колчев

About the author

Аз съм уеб разработчик с опит в работата както с Windows 11, така и с 10. Също така съм потребител на Firefox от много години и съм станал доста опитен в използването на изцяло новата конзола за игри Xbox One. Основните ми интереси са в разработката на софтуер, по-специално в уеб и мобилното развитие, както и науката за данни. Имам много добри познания относно различни компютърни системи и тяхното използване, така че мога да предоставя безпристрастна обратна връзка за различни програми или услуги, които може да използвате.


Related posts