Как отлаживать Nuxt в скриптах браузера через расширение Google Chrom

Question

Я нашел много вопросов об этом опыте отладки без хороших ответов.

Answer 1

Вот мой конфиг для сценариев отладки в браузере. 1. Установите отладчик для расширения Chrome. 2. Добавьте конфигурацию в nuxt.config.js:

extend(cfg, ctx) {
  cfg.devtool = 'source-map';
}

3. Добавить конфигурацию запуска:

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Front in Chrome",
  "url": "http://localhost:YourSitePortHere",
  "webRoot": "${workspaceFolder}",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*"
  }
}

4. Начальный сайт: npm run dev (мой скрипт dev по умолчанию: "dev": "nuxt")
5. Запустите отладку через F5 или в панели отладки.
6. Браузер появится вместе с вашим сайтом, а точки останова в vs-коде будут работать, когда вы работаете в этом новом окне браузера!