В това ръководство ще научите как да използвате Chrome Developer Tools, за да променяте стилове и скриптове, без да внасяте промени в оригиналния код. Ще бъде показано как с помощта на Overrides и работното пространство на Chrome можете да извършвате обширни тестове и промени на вашия уебсайт, без да се налага да докосвате оригиналния сървърен файл.
Най-важни заключения
- С Overrides можете да пренаписвате файлове локално, за да направите тестове и промени.
- Работното пространство ви позволява да свържете локалната си папка за разработка с Chrome Developer Tools, за да направите промени директно.
- Тези две функции са изключително полезни за отстраняване на проблеми в производствената среда, без да се засяга оригиналният сървърен код.
Стъпка по стъпка ръководство
За ефективно използване на Developer Tools на Chrome, следвайте тези стъпки:
1. Използване на Overrides
Първо трябва да използвате функцията Overrides на Chrome. Изберете JavaScript файл, който се зарежда от сървъра, например main.js.
Щракнете с десния бутон върху файла и изберете "Override Content" от контекстното меню.
Отворя се диалогов прозорец, в който можете да изберете мястото за локалния файл. Уверете се, че вече сте създали папка, в която да поставите вашите променени файлове.
Изберете желаната папка и щракнете върху "Select Folder". Това ще установи връзката между оригиналния файл и вашия локален файл.
Сега трябва да предоставите на браузъра достъп до тази папка. Отново щракнете върху менюто Overrides и се уверете, че разрешението за достъп до целевата папка е активирано.
2. Създайте локален файл
Сега можете да създадете нов файл в папката Override. Отворете файла и напишете например прост скрипт с alert().
Можете да промените съдържанието според вашите нужди. Запазете файла и презаредете страницата, за да видите, че вече се появява прозорец за предупреждение, вместо файлът, който първоначално беше зареден от сървъра.
3. Проверка на мрежовата активност
За да се уверите, че файла вече не се зарежда от сървъра, отворете Network-таб в Developer Tools. Трябва да видите, че main.js файлът вече не се извлича от сървъра, а вместо това се използват променените локални съдържания.
Ако искате да добавите още Overrides или да изтриете съществуващи, отидете в секцията Overrides, където можете да видите преглед на всички активирани Overrides.
4. Работа с работното пространство
След това искате да настроите работното пространство. Тук можете да свържете локалната си папка за разработка с Developer Tools. Отидете в настройките на разработчичките инструменти и потърсете опцията "Workspace".
Изберете папката, в която са проектите ви. Chrome отново изисква разрешение за достъп до тази папка, така че се уверете, че сте дали съответните разрешения.
5. Промени в кода
Сега можете да работите директно в Работното пространство. Например, отворете вашият main.js файл, направете промени и запазете файла. Кода автоматично ще бъде презареден от сървъра и ще веднага може да видите как се отразява промяната на вашия уебсайт.
6. Дебъгване в Работното пространство
Едно от практичните предимства на Работното пространство е, че можете да поставите брейкпойнти, за да дебъгвате кода си по-ефективно. Поставете брейкпойнти в редовете на вашия код, презаредете страницата, за да спрете изпълнението и да проверите текущото състояние на променливите.
7. Предимства и недостатъци
Въпреки че Работното пространство е полезно, много разработчици препоръчват да правите промените директно в текстов редактор като Visual Studio Code и да запазвате файловете там. Това ви позволява по-добре да разберете коя версия на файловете се използва. При използването на Работното пространство може да бъде объркано, особено ако връзката към оригиналните файлове не е ясна.
Въпреки това, ако редактирате само прости CSS файлове или код, който не е транспилиран, Работното пространство може да е добър избор.
Резюме
В това ръководство научихте как да работите с Overrides и Работното пространство в Chrome Developer Tools, за да променяте стилове и скриптове, без да докосвате оригиналния файл на сървъра. Overrides ви позволяват бързо да правите промени, докато Работното пространство ви позволява да работите директно с вашия директориум за разработка.
Често задавани въпроси
Могат ли Overrides да бъдат използвани и за CSS файлове?Да, можете да използвате Overrides и за CSS файлове. Просто изберете желания CSS файл и активирайте Overrides.
Как да деактивирам Overrides?Можете да деактивирате Overrides, като отидете в Developer Tools, влезете в Overrides и ги изключите или изтриете.
Има ли ограничения за Работното пространство?Да, понякога може да бъде проблематично да идентифицирате правилното Работно пространство, особено при транспилирания код.
Защо да използвам Overrides вместо Работното пространство?Overrides предлагат по-ясен начин за правене на промени, без да се объркате с различни версии на файловете. Често са по-лесни за употреба, ако не искате да променяте оригиналните файлове директно.
