В этом руководстве вы узнаете, как использовать Chrome Developer Tools, чтобы настраивать стили и скрипты без изменений в исходном коде. Показано, как с помощью Overrides и рабочей области Chrome вы можете проводить обширные тесты и настройки на своем веб-сайте, не затрагивая оригинальный серверный файл.
Основные выводы
- С помощью Overrides вы можете переопределить файлы локально для проведения тестов и настроек.
- Рабочая область позволяет вам связать свою локальную папку для разработки с инструментами разработчика Chrome для непосредственного внесения изменений.
- Эти две функции чрезвычайно полезны для отладки проблем в производственной среде без воздействия на оригинальный серверный код.
Пошаговое руководство
Для эффективного использования инструментов разработчика Chrome следуйте этим шагам:
1. Использование Overrides
Сначала давайте использовать функцию Overrides в Chrome. Найдите JavaScript-файл, например main.js, который загружается с сервера.
![Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Полное руководство Инструменты разработчика Chrome: переопределения и Рабочая область - Подробное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-15.webp?tutkfid=226688)
Щелкните правой кнопкой мыши по файлу и выберите в контекстном меню «Override Content».
Откроется диалоговое окно, в котором вы можете выбрать расположение локального файла. Убедитесь, что у вас уже есть созданная папка, в которой вы хотите разместить ваши замещающие файлы.
![Инструменты разработчика Chrome: Замены и Рабочее пространство - Подробное руководство Chrome Developer Tools: Переопределения и Рабочее пространство - Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-74.webp?tutkfid=226695)
Выберите желаемую папку и нажмите «Выбрать папку». Это установит соединение между оригинальным файлом и вашим локальным файлом.
Теперь вам нужно предоставить браузеру доступ к этому каталогу. Снова нажмите на меню Overrides и убедитесь, что разрешение на доступ к желаемому каталогу включено.
![Инструменты разработчика Chrome: Замещения и Рабочее пространство - Полное руководство Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-93.webp?tutkfid=226702)
2. Создание локального файла
Теперь вы можете создать новый файл в папке Override. Откройте файл и напишите, например, простой скрипт alert().
![Инструменты разработчика Chrome: Переопределения и Workspaces - Подробное руководство Инструменты разработчика Chrome: Замещения и Рабочая область — Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-105.webp?tutkfid=226705)
Вы можете настроить содержимое в соответствии с вашими потребностями. Сохраните файл и обновите страницу, чтобы увидеть, что теперь появляется окно оповещения, а не файл, который изначально был загружен с сервера.
![Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Подробное руководство Инструменты разработчика Chrome: Переопределения и Рабочая область - Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-116.webp?tutkfid=226708)
3. Проверка сетевой активности
Чтобы убедиться, что файл больше не загружается с сервера, откройте вкладку Network в Developer Tools. Вы увидите, что файл main.js теперь больше не запрашивается с сервера, а вместо этого отображаются локально перезаписанные содержимое.
![Инструменты разработчика Chrome: переопределения и рабочее пространство - Полное руководство Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Подробное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-144.webp?tutkfid=226711)
Если вы хотите добавить еще замещений или удалить существующие, перейдите в раздел Overrides, где вы увидите список всех активированных Overrides.
![Chrome Developer Tools: Переопределения и Рабочая область - Подробное руководство Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Подробное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-158.webp?tutkfid=226713)
4. Работа с рабочей областью
Затем мы настроим Рабочую область. Здесь вы можете связать свою локальную папку для разработки с инструментами разработчика. Перейдите в настройки инструментов разработчика и найдите опцию «Рабочая область».
![Инструменты разработчика Chrome: Overrides и Workspace - Полное руководство Инструменты разработчика Chrome: Замещения и Рабочая область - Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-202.webp?tutkfid=226715)
Выберите папку, в которой находятся ваши проекты. Chrome также требует разрешения на доступ к этой папке, поэтому убедитесь, что у вас есть соответствующие разрешения.
![Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Полное руководство Инструменты разработчика Chrome: переопределения и Workspace - Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-226.webp?tutkfid=226717)
5. Изменения в коде
Теперь ты можешь работать непосредственно в рабочей области. Например, открой файл main.js, внеси изменения и сохраните файл. Код будет автоматически загружен с сервера заново, и ты сразу увидишь, как изменение повлияло на твой сайт.
6. Отладка в рабочей области
Практическим преимуществом рабочей области является возможность устанавливать точки останова для эффективной отладки кода. Устанавливай точки останова в своем коде и обновляй страницу, чтобы прервать выполнение и проверить текущее состояние переменных.
![Инструменты разработчика Chrome: Замещения и Рабочее окружение - Полное руководство Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Подробное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-324.webp?tutkfid=226724)
7. Плюсы и минусы
Хотя рабочая область полезна, многие разработчики рекомендуют вносить изменения напрямую в редакторе кода, таком как Visual Studio Code, и сохранять файлы там. Это позволяет лучше видеть, какая версия файлов используется. Использование рабочей области может стать запутанным, особенно если не совсем понятно, как связаны оригинальные файлы.
![Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Полное руководство Chrome Developer Tools: Overrides и Workspace - Полное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-373.webp?tutkfid=226728)
Тем не менее, если ты редактируешь только простые CSS-файлы или не транслированный код, рабочая область может быть хорошим выбором.
![Инструменты разработчика Chrome: Переопределения и Рабочее пространство - Подробное руководство Инструменты разработчика Chrome: Замещения и Рабочее пространство - Подробное руководство](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-359.webp?tutkfid=226731)
Итог
В этом руководстве ты узнал, как работать с Overrides и Workspace в инструментах разработчика Chrome, чтобы настраивать стили и скрипты, не затрагивая оригинальный серверный файл. С Overrides ты можешь быстро вносить изменения, а Workspace позволяет работать непосредственно с твоей папкой разработки.
Часто задаваемые вопросы
Могу ли я использовать Overrides также для CSS-файлов?Да, ты можешь использовать Overrides также для CSS-файлов. Просто выбери нужный CSS-файл и активируй Override.
Как отключить Overrides?Ты можешь отключить Overrides, перейдя в инструменты разработчика к разделу Overrides и там их выключив или удалив.
Существуют ли ограничения для Workspace?Да, иногда может возникнуть проблема с определением корректного рабочего пространства, особенно с транслированным кодом.
Почему стоит использовать Overrides вместо Workspace?Overrides предлагают более понятный способ внесения изменений, не путаясь с различными версиями файлов. Они часто проще в использовании, если тебе необходимо вносить изменения в оригинальные файлы напрямую.