# Debug

To debug the most immediate is to add console.log(obj) or console.log(JSON.stringify(obj)) commands in the source code to inspect the values of variables at specific points.

First there is more to console than just .log().

This section introduces the the Chrome debugger together with VS Code.

# Procedure 1

1. Install VS Code extension Debugger for Chrome.
2. Add debugger keyword in the source code where you want to pause the execution.
3. Launch command yarn dev-debug-[f] (where f is v for vuetify or b for bootstrap)
4. Open Chrome to http://localhost:3000
5. Open the Chrome console (Win: F12, macOS: Cmd+Alt+J)

Upon page load, execution will pause in the Chrome debugger.

From there you can:

• Inspect variables
• Interrupt execution
• Execute instructions step by step
• Add breakpoints
• Resume execution

To know how see the Chrome debugger doc.

# Procedure 2

Alternatively replace step-4 in Procedure 1 by:

1. Add this launch.json file in folder vscode
2. Launch VS Code debugger "client: chrome"

This will open a new Chrome window to http://localhost:3000.
Execution will pause both in Chrome and VSCode debugger.

From there you can use either debugger.

# Webpack

To inspect the webpack config produced by Nuxt:

yarn dump-conf-[f]   # [f] = b or v for resp. bootstrap or vuetify

This will dump it in file nuxt-webpack-config-dump.json.