Быстрый отладочный бой II (Браузер - Отладка онлайн)

Debug
Быстрый отладочный бой II (Браузер - Отладка онлайн)

1.Быстрый отладочный бой 1 (браузер - основы)

2.Быстрый отладочный бой II (Браузер - Онлайн)

3.Быстрая отладка 3 (узел - плагин webpack, плагин babel, исходный код vue)

Из введения в предыдущую статью мы уже знаем основные навыки отладки, так как же мы можем быстро отладить некоторые онлайн-проблемы? В этой статье онлайн-отладка делится на следующие три типа: (Конечно, есть и лучшие методы отладки, которые можно предложить в области комментариев)

  1. Онлайн-модификация в реальном времени; для некоторых стилей и некоторых js уже знают о проблеме и быстро модифицируют ее, чтобы добиться режима исправления ошибок.
  2. прокси для нативного кода; В этом случае несоответствие между онлайн-кодом и локальным можно решить, и очень удобно вставлять код в исходный код и сразу его отлаживать
  3. sourceMap не существует в сети Включить локальный sourceMap; Иногда некоторые проблемы не очевидны на первый взгляд, но исходная карта недоступна в Интернете, поэтому мы можем запустить локальную исходную карту, чтобы найти проблему.

Обратите внимание, что следующее доменное имя yifenghua.win отключено и заменено на https://hua1995116.github.io/myblog/.

Итак, пример проходит в следующей среде.

Операционная система: MacOS 10.13.4

Chrome: версия 72.0.3626.81 (официальная) (64-разрядная версия)

Онлайн-модификация в реальном времени

открытая функция

При отладке онлайн-проблем мы столкнемся с такими проблемами, например: мне нужно изменить стили прямо на странице, чтобы быстро найти проблему, может быть, некоторые стили несовместимы, что приводит к неудачному рендерингу. Но каждый раз, когда мы заканчиваем вносить изменения в devTools, мы хотим снова обновить страницу. На данный момент все, что мы модифицировали, исчезло. Функция, которую я представляю ниже, позволяет нам лучше отлаживать онлайн-проблемы и поддерживать состояние.

В chrome devTools есть функция Overrides. Эта функция очень полезна для нашей онлайн-отладки.

  1. Открыть:потратить 1995116.GitHub.IO/no blog/exam…  
  2. нажавCommand+Option+I (Mac)илиControl+Shift+I（Windows、Linux）чтобы открыть DevTools. Этот ярлык открывает панель консоли.
  3. Нажмите кнопку источника

1550042488255.jpg

  1. Нажмите кнопку, указанную стрелкой, найдите Overrides и выберите ее.

  2. Щелкните Выбрать папки для переопределений. Выберите локальный пустой каталог папки.

  3. Выйти из авторизации, нажать Разрешить

    1550043161526.jpg

Начинать

Это наша страница только что

1550044581302.jpg

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

1550047816288.jpg

Идите вперед и нажмите на вкладку источника. Нажмите кнопку Страница.

1550048001733.jpg

Откройте наш demo3.html, измените заголовок в заголовке на debug03 и сохраните его (mac: command + s, windows: ctrl + s).

1550048078356.jpg

Обновите страницу еще раз и обнаружите, что заголовок нашей страницы был успешно изменен.

Наконец, мы нажимаем demo3.js на исходной странице. Будуcard.text = '123';изменился наcard.text = 'hello';, продолжить сохранение.

Отлично. Мы сделали все наши модификации.

1550048674847.jpg

Видно, что под всеми нашими файлами есть маленькая синяя точка. Здесь измененные файлы хранятся в папке, выбранной в начале.

просмотреть разницу

Итак, как вы видите, что мы изменили раньше?

Продолжайте открывать devTools, нажмите три маленькие точки в правом верхнем углу -> Дополнительные инструменты -> Изменения

1550049006069.jpg

Вы можете увидеть все изменения, которые мы только что сделали.

1550049082173.jpg

На этом мы завершили метод в строке отладки Overrides.

прокси для нативного кода

Прежде всего, вам нужно скачать charles.Другие прокси-инструменты также могут использоваться, если они могут проксировать запросы к локальным инструментам, здесь я буду использовать знакомый charles для демонстрации. Итак, какие проблемы этот метод может отлаживать в основном онлайн?

  1. Быстро подтвердите, соответствует ли локальная версия онлайн-версии. Если с локальным файлом проблем нет, а в онлайне есть, то перепаковать один раз. (Если есть номер версии, не обращайте на него внимания)
  2. Код отладки.

код отладки

Давайте продемонстрируем, как отлаживать код онлайн.

Предполагая, что это наш локальный проект. Итак, чтобы продемонстрировать, вам нужно сделать следующие шаги.

git clone https://github.com/hua1995116/debug.git

cd debug

cd charles-debug

npm install

npx webpack --watch --progress (npm >= v5.2.0)

Затем наш упакованный js будет сгенерирован в нашем каталоге dist

1550052278719.jpg

  1. Открыть:потратить 1995116.GitHub.IO/no blog/exam…  

  2. Откройте сеть devTools, чтобы просмотреть путь js.потратить 1995116.GitHub.IO/no blog/exam…  

  3. Открываем наш чарльз (ну не буду объяснять как его настраивать и пользоваться, просто байду и гугл)

  4. Нажмите Map Local в Tools для настройки.

1550052700177.jpg

  1. Добавить правило

1550052759668.jpg

  1. Сопоставьте URL-адрес в сети с локальным адресом (то есть местоположением нашего проекта клона только что), как показано на рисунке.

1550052892041.jpg

  1. Внесите изменения в наш локальный контент. Измените его на следующее
const card = document.querySelector('.card-link');
card.onclick = function() {
  card.text = '你好';
}

  1. откройте нашу страницу сновапотратить 1995116.GitHub.IO/no blog/exam…  

  2. просмотреть журнал Чарльза

1550053079374.jpg

Вы можете видеть, что файл был успешно сопоставлен с локальным. Таким образом, мы можем отлаживать наши онлайн-файлы в режиме реального времени. Вы можете вставлять различные флаги и отладчики.

sourceMap не существует в сети Включить локальный sourceMap

Ну, в дополнение к этому, мы также можем добавить sourceMap через charles.

Измените проект, который мы только что клонировали, измените webpack.config.js и index.js.

webpack.config.js

module.exports = {
    entry: './index.js',
    output: {
        filename:'demo3.js'
    },
    devtool: 'source-map',
};

index.js

const card = document.querySelector('.card-link');
card.onclick = function() {
   console.log(ss);
   card.text = '你好';
}

бегать

npx webpack --watch --progress

Добавить еще одну локальную карту в charles

1550054237183.jpg

Открой сейчаспотратить 1995116.GitHub.IO/no blog/exam…  

Щелкните ссылку «Карта» и найдите ошибку.

1550054389531.jpg

Нажмите index.js, и вы увидите, что мы можем напрямую найти исходный код.

1550054429653.jpg

Суммировать

С помощью трех вышеперечисленных способов отладки онлайн-кода. Следует сказать, что подавляющее большинство проблем можно локализовать. Если у вас есть лучший способ оставить сообщение, давайте учиться вместе, ну, это действительно ароматно. (ускользнуть

Больше, пожалуйста, следите

Ссылки:huayifeng.top/

Категории