Ние користиме DevTools за Chrome
- Брзо уредување на HTML елементи
- Проширете ги сите детски елементи
- Релокација на инспекторот
- Пребарување DOM елемент
- Палети
- Повеќе курсори
- Кодирање на base64 сликата
- Псевдо-класа префрлување
- Избор на колумни
- Копирај барање за cURL
- Тастатура на екранот
- Екранот на целата страница
- Емулација на допир уреди
- Корисни функции
Како што наведува името, Chrome DevTools, или веб инспектор, е алатка наменета за веб програмери и луѓе поврзани со неа. Веб инспекторот ви овозможува да го направите следново:
- Проверете ја точноста на екранот.
- Следете го извршувањето на скриптите во JavaScript.
- Прегледајте мрежни активности.
Кога го пишував овој напис, го користев Канариски - верзија на Chrome, каде што се тестираат нови функции, кои потоа спаѓаат во стабилна верзија на Chrome.
За да го стартувате инспекторот, можете да кликнете со десното копче на кое било место на страницата и изберете "Преглед на кодот на предметот", исто така можете да притиснете Ctrl + Shift + C.
Брзо уредување на HTML елементи
Да почнеме со наједноставните: елементи за уредување.
Како да проверите:
- Изберете табулаторот Елементи.
- Изберете било кој HTML елемент во панелот.
- Двоен клик на ознаката и промена, на пример, името на ознаката.
Кога уредувањето е завршено, тагот за затворање автоматски ќе се ажурира.
Проширете ги сите детски елементи
Како да проверите:
- Одете во панелот Елементи.
- Изберете елемент и, додека го држите Alt, кликнете на стрелката лево од елементот.
Релокација на инспекторот
Инспекторската табла може да се притисне и на дното на прозорецот на прелистувачот и на нејзината десна страна. На пример, локацијата на панелот од десната страна е погодна кога работите на монитори со широк екран. Исто така, инспекторот може да се стави во посебен прозорец и, на пример, да се префрли на друг монитор.
Како да проверите:
- Ctrl + Shift + D - преместете ја локацијата
Пребарување DOM елемент
Веројатно не многу за кои ова ќе биде откритие, но во табулаторот "Елементи" можете да пребарувате од ДОМ.
Како да проверите:
- Притиснете Ctrl + F и внесете го предложеното барање за пребарување.
Палети
Изберете боја од палетаИзборот на боја во последните верзии на Хром претрпе некои промени: додаде две палети за да го олесни изборот на боја.
Повеќе курсори
Поместете го курсорот и, држејќи Ctrl, кликнете на саканата област за да додадете курсор. Можете да го вратите дејството користејќи Ctrl + U. Лично, никогаш не сум бил корисен.
Кодирање на base64 сликата
Како да проверите:
- Префрлете се на панелот Мрежа.
- Изберете слика
- Десен-клик на сликата и изберете ""
Псевдо-класа префрлување
Псевдокласите ја одразуваат состојбата на елементите и нивните релативни позиции.
Како да проверите:
- Десен-клик на елемент во панелот Елементи и изберете псевдоклас во листата на елементите на силите.
- Можете исто така да изберете псевдоклас на десната страна на панелот Елементи.
Избор на колумни
Како да проверите:
- Одете во панелот "Извори".
- Изберете било која датотека.
- Изберете го текстот со држење Alt.
Избирањето колона исто така функционира кога HTML е уредено во панелот Елементи.
Копирај барање за cURL
Секое барање во јазичето Мрежа може да се копира и потоа да се вметне во терминалот за извршување со користење на навивам.
Тастатура на екранот
Ако е одбран профилот Nexus 5X, можете да видите како изгледа страницата кога е активна тастатурата на екранот.
Chrome DevTools: тастатура на екранот
Екранот на целата страница
Земете слика на целата страница е многу едноставна. Само треба ...
- Отворен инспектор.
- Одете во конзола.
- Притиснете Ctrl + Shift + P
- Напишете "скриншот"
- Изберете "Снимајте целосна големина на екранот"
Емулација на допир уреди
Можете исто така да симулирате некои сензори:
- Екран на допир
- Координати за геолокација
- Акцелеметар
Како да пробате:
- Изберете панел Елементи.
- Притиснете "Esc" и изберете "Emulation> Sensors".
Корисни функции
клучеви и вредности
Функциите на клучеви и вредности ви дозволуваат да ги изнесете клучевите или вредностите на објектот на конзолата, соодветно. Прикажување на клучеви и вредности на објектот посебно