Інструменти розробника Chrome: Перевизначення та Робоче середовище - Загальний посібник

У цьому посібнику ти дізнаєшся, як використовувати інструменти розробника Chrome, щоб налаштовувати стилі та скрипти без внесення змін до оригінального коду. Показано, як з допомогою Overrides та Робочого простору Chrome ви можете проводити широкі тести та налаштування на вашому веб-сайті без необхідності торкатися оригінального серверного файлу.

Головні відкриття

• З допомогою Overrides ви можете локально змінювати файли для проведення тестів та налаштувань.
• Робочий простір дозволяє вам підключити вашу локальну теку розробки до інструментів розробника Chrome для безпосередніх змін.
• Ці функції дуже корисні для відлагодження проблем у середовищі виробництва без впливу на оригінальний серверний код.

Крок за кроком

Щоб ефективно використовувати інструменти розробника Chrome, дотримуйся цих кроків:

1. Використання Overrides

Спочатку ми хочемо використати функцію Overrides у Chrome. Оберіть JavaScript-файл, наприклад, main.js, який завантажується з сервера.

Клацніть правою кнопкою миші на файлі та виберіть в контекстному меню опцію «Перевизначити вміст».

Відкриється діалогове вікно, в якому ви зможете вибрати місце збереження для локального файлу. Переконайтеся, що ви вже створили теку, в якій бажаєте зберігати ваші перевизначені файли.

Виберіть потрібну теку та клацніть «Вибрати теку». Це встановить зв'язок між оригінальним файлом та вашим локальним файлом.

Тепер потрібно надати браузеру доступ до цієї теки. Клацніть ще раз на пункті Overrides та переконайтеся, що дозвіл на доступ до вибраної теки включено.

2. Створення локального файлу

Тепер ви можете створити новий файл у теку перевизначень. Відкрийте файл і напишіть, наприклад, простий скрипт alert().

Ви можете налаштувати вміст за своїми потребами. Збережіть файл та оновіть сторінку, щоб побачити, що тепер з'являється вікно сповіщення, а не файл, який спочатку завантажувався з сервера.

3. Перевірка мережевої активності

Щоб переконатися, що файл уже не завантажується з сервера, відкрийте вкладку Мережа в інструментах розробника. Ви повинні побачити, що файл main.js тепер не завантажується з сервера, а замість нього використовуються локально перевизначені вміст.

Якщо ви хочете додати інші перевизначення або видалити існуючі, перейдіть до області Overrides, де ви побачите перелік всіх активованих перевизначень.

4. Робота з Робочим простором

Далі ми хочемо налаштувати Робочий простір. За допомогою цієї функції ви можете підключити свою локальну теку розробки до інструментів розробника. Перейдіть до налаштувань інструментів розробника та знайдіть опцію „Робочий простір“.

Оберіть теку, де знаходяться ваші проекти. Chrome також потребуватиме дозволу на доступ до цієї теки, тож переконайтеся, що ви надали відповідні дозволи.

5. Зміни у коді

Тепер ти можеш працювати безпосередньо у робочому просторі. Наприклад, відкрий свій файл main.js, внеси зміни і збережи файл. Код автоматично перезавантажиться з сервера, і ти зможеш відразу побачити, як зміни вплинули на твій веб-сайт.

6. Відлагодження у робочому просторі

Однією з цікавих переваг робочого простору є можливість встановлення точок зупинки для ефективного відладження коду. Встановлюйте точки зупинки у рядках свого коду, перезавантажуйте сторінку, щоб призупинити виконання і перевірити поточний стан змінних.

7. Переваги та недоліки

Хоча робочий простір є корисним, багато розробників рекомендують робити зміни безпосередньо в редакторі коду, такому як Visual Studio Code, і зберігати файли там. Це допомагає краще бачити, яку версію файлів використовуєш. При використанні робочих просторів може виникати плутанина, особливо якщо посилання на початкові файли не є чітким.

Тим не менш, якщо ти працюєш лише з простими CSS-файлами або кодом без транспіляції, робочий простір може бути хорошою опцією.

Загальний підсумок

У цьому посібнику ти дізнаєшся, як працювати з перевизначеннями та робочим простором у Chrome Developer Tools, щоб адаптувати стилі та скрипти, не звертаючись до оригінального файлу сервера. З перевизначеннями можна швидко вносити зміни, в той час як робочий простір дозволяє працювати безпосередньо зі своєю папкою розробника.