This is part three of a mini series on my journey to build my own blogging site without using WordPress or any blogging site like Tumbler or Medium. I want full control of my published thoughts. This includes if and how I should share my data with advertisers and crawlers.
I remember the days when you had to print console statements in your code to troubleshoot odd behavior. When you needed to dig into the variables and insides the functions and scopes. As long as there was a developer console I could see the output, I was good to go.
However, this left a few undesirable “features” in the code. Either you wrote a custom error function that you could turn off using a global variable… Or, you had to go back through and manually remove all those print statements to clean-up the code before pushing to production.
If you opted for the custom error function (or class), then you ended up with bloated code that consumed memory overhead — even if it wasn’t used.
Now, you can simply forego the print statements and inspect the in-memory variables inside VScode. (You still need to output “user errors,” however.)
In addition to installing the extensions, you’ll need to configure the debugger in VScode. Below is the basic config recommended to add:
📖 Find the attribute definitions here: https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes
Take this file and save it to
~/project/.vscode/launch.json. This is where VScode will look to find the debugger config. (Replace the
/project folder with the root of your project.) You may also wish to update your
.gitignore file if you don’t wish to publish to your repo. In my case, I want the team to benefit from the same config, so I leave it in.
Now that we have the extensions and config setup, it’s time to start debugging Hexo.
Be sure to exit out of Hexo if it’s already running to avoid conflicts.
Click on the
Run and debug icon (shift + command + D) and from the VScode debugger side-panel, select
Debug HEXO server from the drop-down options.
As we already configured the
stopOnEntry option, it will pause the code after starting it. However, it’s also a good idea to create your breakpoints within your code to troubleshoot it faster.
Now tap F5 to start the debugger.
You should see a toolbar at the top of VScode. Each of these buttons are defined below.
Be sure to check the options for
Caught Exceptions and
You should see something similar to this:
From here, you can start to step through the code and troubleshoot its behavior. In the
Variables panel, you can review the current status of values (and functions). The
Call Stack panel displays the list of functions that are called (most recent is at the top).
Loaded Scripts shows all the modules called by HEXO.
Watch is where you can add variables to see changes within the current context or scope of the function you are stepping through. And, if you are outputting anything to the
Debug Console, it would show up at the bottom of the screen.
As you can see, VScode makes it easy to dive deeper into the code and follow along. Additionally, you can learn how the code works faster by reviewing the Global variables and functions in the
Variables panel. Watch the
Call Stack to see how functions are called.
In the code, you can hover your mouse above a variable to see its value. Additionally, you can add it to the
Watch panel to see how it changes over runtime.
🎥 Debugging a Hexo plugin | Video (19:06 minutes)
The above illustrates how to debug the JS files in the
node_modules folder (and your HEXO plugins)… However, VScode doesn’t step through your (EJS) theme files by default. To achieve that, you must attach the debugger to the NodeJS process.
First, add the following configuration block to your
Second, run the following command from within the terminal console of VScode.
Hexo Theme inspector from the dropdown of the debugger panel. Click the green run button. You will be prompted to select the nodeJS process for HEXO.
You should see “Debugger listening on …” and “Debugger attached.”
🎥 Walk-through on Debugging Hexo in VScode | Video (11:50 minutes)
extensionHost, or their
pwa- prefixed versions), the realtime performance view is shown in the Debug view:
By default, this view shows chronological “snapshots” of your program’s stack taken roughly each millisecond. You can zoom and explore the flamechart, and ctrl or cmd+click on stacks to jump to the stack location.
The flame chart also supports a “left heavy” view, toggled by clicking the button in the upper-right corner of the chart.
🎥 Demo of Node Clinic with Matteo Collina | Video (12:07 minutes)
To find out more about Node Clinic visit: https://clinicjs.org
- Troubleshooting HEXO
- Debugging HEXO
- Debug Hexo with VS Code
- Node.js debugging in VS Code
- Browser debugging in VS Code
- Node.js Development with Visual Studio Code
- How to debug/inspect hexo blog
- VSCode: Debugando módulos instalados em node_modules
- Debug hexo blog generation in webstorm
- how can I debug a node app that is started via the command line (cli) like forever or supervisor?
- 🎥 How to Use a Debugger - Debugger Tutorial | 17:00 minutes
- 🎥 Debugging in Visual Studio Code Tutorial | 6:25 minutes
- Debugging Node.js apps with Visual Studio Code debugger
- Node.JS Debugger documentation
- Unbound breakpoint in vscode for debugging nodejs app
- Absolute Easiest Way to Debug Node.js - with VS Code