Full code: https://github.com/aleksvp2017/debug
Using:
Vue: to construct de UI;
Visual Studio Code: to write and debug the code;
Chrome: to navigate and debug.
There are some ways to accomplish this. I'm going to show the one that works better for me, not necessarily the best one.
Assuming that you're developing an javascript UI running on webpack-dev-server, the idea is to run it on Chrome with a particular configuration and plug a debug on in, wich is a VS Code extension.
The first step is to install Debugger for Chrome on your VS Code. You can search for it on VS Code extensions tab (inside VS Code), or just click here
Now in the Activity Bar on VS Code (usually the vertical bar on the left), click on the debug button (actually the name is Run). On Windows OS the shortcut for that is Ctrl+Shift+D. Then click on "create a launch.json file". If you have a bunch of projects, you must select the project, otherwise just select "Chrome" option. Change the following inside the configurations part on the launch.json:
Include "urlFilter": "http://localhost:8080/*";
Include "port": 9222;
Change request to "attach".
The next step is launch Chrome with the configuration port for the debug. You probably need to do it with admin privileges. One way of doing it is using PowerShell on Windows OS, running it in admin mode:
./chrome.exe --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
Launch your app (in my case with "npm run dev") as you usually do (run an "npm run build" if it is the first time your running it).
The last step is to start the debug. Go back to the Activity Bar on Vs Code, now when you click Run, since you created the launch.json file, it is going to show up a Launch button. If you got an connect error, most likely you didn't start chrome correctly. That a look at the CALL STACK tab on VS Code, it should show something like "Launch Chrome against localhost running".
From here you have two options:
1) Debug the code generated, not exactly your source: open developer tools on Chrome; go to sources; webpack ://; src; then select your file (my case, App.vue). You can put your breakpoint now. Notice that, when you execute the function you want do debug (for instance, a button click), the debug wil activate on Chrome and on VS Code, but it is not your source code, it is the generated one (on VS Code, the file name is suffixed with something like ?ea99). Since it is quite the same, probably will work for debug purposes.
2) Debug your source code: On webpack.config.js change devtool: '#eval-source-map' for devtool: '#source-map'. Start you app again, open it on Chrome, then start the debug on VS Code. Now, you can put your breakpoints direct on VS Code. The debug wil active on both again (Chrome and VS Code).
This time I have to admit it, it was not all that simple, uh?
Comments