Google Chrome е един от популярните уеб браузъри за уеб програмиране, благодарение на разширените си функции. Инструменти за програмисти на Chrome може да бъде много полезно при отстраняване на грешки. Повечето от нас вече знаят, че можем да редактираме Live CSS с Chrome Dev Tools, но има още съвети, които ще споделим с вас днес.
Съвети за инструментите за разработка на Chrome
Има много неизвестни и скрити трикове на Chrome Dev Tools и ще разгледаме най-полезните трикове сред тях. За да отворите инструментите за програмисти в Chrome, натиснете F12 на клавиатурата и изпробвайте следните трикове.
1. Намерете и Отворете файл
Когато правим уеб програмиране, ние се занимаваме с много HTML, CSS, JS и други файлове. Когато искаме да отстраняваме нищо, откриваме инструментите на Chrome Dev. Можете бързо да търсите и намирате конкретния файл, за да улесните работата си. Просто натиснете Ctrl + P и започнете да пишете името на файла. Това ви помага да намерите конкретния файл от списъка с файлове.
2. Търсене в изходния файл
В предишния трик научихме как да търсим конкретен файл. Можете дори да търсите конкретен низ във всички заредени файлове. Натиснете Ctrl + Shift + F за търсене на низ в файлове. Също така поддържа регулярни изрази.
3. Отидете на определен ред
След като отворите произволен файл и искате да преминете към конкретен ред, натиснете Ctrl + G и дайте номера на линията и натиснете клавиша enter.
4. Изберете раздела DOM Елементи в конзолата
Dev Tools също ви позволява да избирате елементи в конзолата.
- $() – Връща първата поява на съответния селектор на CSS.
- $$() – Той връща масива от елементи, съответстващи на даден селектор на CSS.
5. Използвайте множество грижи
Понякога искате да зададете множество грижи на различни места и лесно можете да направите това в инструментите на Chrome Dev, като задържите Ctrl и кликнете на мястото, където искате да ги поставите. След това започнете да пишете и ще видите, че е поставен на различни избрани места.
6. Запазете дневника
Запазването на дневника ви помага да запазите дневника, дори и страницата да е заредена. Проверете опцията до Запазете регистрационния файл в дневника на конзолата и се запазва дневникът. Това показва дневника преди страницата да бъде изтеглена и полезна за разследване на грешките.
7. Използвайте вградения код за разкрасяване
Инструментите на Chrome Dev имат извикването на вградения код хубав печат "{}". Инструментът за програмисти показва минимизирания код и не е толкова лесен за четене. Кликнете върху бутона за красив печат, който е показан в долния ляв ъгъл на отворения файл източник, за да се покаже изходния файл в човешки четиваем формат.
8. Вашият уеб сайт е мобилен? Проверете го тук
Инструментите Chrome Dev също ни позволяват да проверим дали даден уебсайт е приятелски настроен към мобилни устройства или не. Можете да проверите как изглежда уебсайтът Ви на различни устройства. Преминете към инструментите на Chrome Dev и по-долу съревнование можете да запишете различни устройства. Изберете устройството, което искате, и проверете как изглежда уебсайтът Ви на това устройство.
9. Емулирайте сензори и географско местоположение
Можете дори да подражавате на сензорите като сензорен екран и акселерометри. Можете дори да подражавате на географското местоположение. За да направите това, насочете се към Емулация -> Датчици.
10. Изберете следващата поява на текущата дума
Ако искате да замените думата във всички случаи, изберете думата и натиснете Ctrl + D за да изберете следващата поява на избраната дума. В него можете да редактирате тази дума във всички свои събития в един изстрел.
11. Променете цветовия формат
Просто използвайте Shift + Кликнете върху цветната визуализация за промяна променя между rgba, hexadecimal и hsl форматирането.
12. Добавете промени в локалните файлове чрез работно пространство
Ние сме в състояние да редактираме изходните файлове и да правим някои промени в CSS, Java Script и в други файлове в инструментите на Chrome Dev. За да добавите тези промени към локалните файлове, няма нужда да копирате промените от работното пространство в файлове на диск. Инструментите на Chrome Dev ви позволяват да съгласувате файлове и да актуализирате локалния файл с промените, които сте направили в инструментите на dev. За да направите това, кликнете с десния бутон върху файла източник от лявата страна на Източници и изберете Добавяне на папка към работното пространство.
За повече информация относно работните места преминете към Chrome.com.
