Skip to content

Commit

Permalink
#2 Add FF debugger configuration, update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
NiloCK committed Aug 8, 2018
1 parent da0b54f commit 1f1917d
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 4 deletions.
16 changes: 15 additions & 1 deletion .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [
{
"url": "webpack:///src/",
"path": "${webRoot}/"
}
]
},
{
"type": "chrome",
"request": "launch",
Expand All @@ -13,5 +26,6 @@
},
"sourceMaps": true
}
]
}
]
}
8 changes: 5 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ After cloning the repository,

- `npm run serve` or `yarn serve`

Does an in-memory build of the project and hosts with the webpack dev server. Hot reloading and source maps included for debugging.
Does an in-memory build of the project and hosts with the webpack dev server. Hot reloading and source maps included for in-browser debugging.

## Debugging

The project can be debugged inside of VSCode using the existing settings from the `./vscode` folder. After starting a development server with `yarn serve` / `npm run serve`, hitting F5 will launch VSCode's debugger and attach to the process. (Note: debugging is slightly buggy for the time being. See #2.)
The project can be debugged inside of VSCode using the existing settings from `./vscode/launch.json`. After starting a development server with `yarn serve` / `npm run serve`, hitting F5 will launch VSCode's debugger and attach to the process. Launch configurations for Firefox and Chrome are present. They need the VSCode [debugger for firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) and [debugger for chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) exensions, respectively.

Debugging / virtual DOM exploration is also available in the browser via [vue-devtools](https://github.com/vuejs/vue-devtools).
As of now, only the firefox debugger is functioning reliably (see #2).

Component state / props / virtual DOM exploration is also available in the browser via [vue-devtools](https://github.com/vuejs/vue-devtools).

- [Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
Expand Down

0 comments on commit 1f1917d

Please sign in to comment.