How to debug (subquery#480)

* Add debugging tutorial

* Adds YT URL

* Update debug-projects.md

Co-authored-by: James Bayly <[email protected]>

docs/.vuepress/config.js

@@ -94,6 +94,7 @@ module.exports = config({
           '/tutorials_examples/batch-size.md',
           '/tutorials_examples/run-indexer.md',
           '/tutorials_examples/dictionary.md',
+          '/tutorials_examples/debug-projects.md',
           '/tutorials_examples/terminology.md',
         ]
       },

docs/run/run.md

@@ -165,6 +165,23 @@ If an incorrect URL is used, a 404 not found error will be returned.
 }
 ```
 
+#### Debug your project
+
+Use the [node inspector](https://nodejs.org/en/docs/guides/debugging-getting-started/) to run the following command.
+
+```shell
+node --inspect-brk <path to subql-node> -f <path to subQuery project>
+```
+
+For example:
+```shell
+node --inspect-brk /usr/local/bin/subql-node -f ~/Code/subQuery/projects/subql-helloworld/
+Debugger listening on ws://127.0.0.1:9229/56156753-c07d-4bbe-af2d-2c7ff4bcc5ad
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+```
+Then open up the Chrome dev tools, go to Source > Filesystem and add your project to the workspace and start debugging. For more information, check out 
+[How to debug a SubQuery project](https://doc.subquery.network/tutorials_examples/debug-projects/)
 ## Running a Query Service (subql/query)
 
 ### Installation

docs/tutorials_examples/batch-size.md

@@ -1,4 +1,4 @@
-# How to Change the Blockchain Fetching Batch Size?
+# How to change the blockchain fetching batch size?
 
 ## Video guide
 

docs/tutorials_examples/block-height.md

@@ -1,4 +1,4 @@
-# How to Start at a Different Block Height?
+# How to start at a different block height?
 
 ## Video guide
 

docs/tutorials_examples/debug-projects.md

@@ -0,0 +1,37 @@
+# How to debug a SubQuery project?
+
+## Video guide
+
+<figure class="video_container">
+  <iframe src="https://www.youtube.com/embed/6NlaO-YN2q4" frameborder="0" allowfullscreen="true"></iframe>
+</figure>
+
+## Introduction
+
+In order to debug SubQuery projects such as stepping through code, setting breakpoints, and inspecting variables, you will have to use a Node.js inspector in conjunction with Chrome developer tools. 
+
+## Node inspector
+
+Run the following command in a terminal screen.
+
+```shell
+node --inspect-brk <path to subql-node> -f <path to subQuery project>
+```
+
+For example:
+```shell
+node --inspect-brk /usr/local/bin/subql-node -f ~/Code/subQuery/projects/subql-helloworld/
+Debugger listening on ws://127.0.0.1:9229/56156753-c07d-4bbe-af2d-2c7ff4bcc5ad
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+```
+
+## Chrome devtools
+
+Open up Chrome DevTools and navigate to the Sources tab. Note that clicking on the green icon will open up a new window.
+
+![node inspect](/assets/img/node_inspect.png)
+
+Navigate to Filesystem and add your project folder to the workspace. Then open the dist > mappings folder and select the code you wish to debug. Then step through the code as with any standard debugging tool. 
+
+![debugging projects](/assets/img/debugging_projects.png)

docs/tutorials_examples/dictionary.md

@@ -1,4 +1,4 @@
-# How does a SubQuery Dictionary Work?
+# How does a SubQuery dictionary work?
 
 The whole idea of a generic dictionary project is to index all the data from a blockchain and record the events, extrinsics, and its types (module and method) in a database in order of block height. Another project can then query this `network.dictionary` endpoint instead of the default `network.endpoint` defined in the manifest file. 
 

docs/tutorials_examples/run-indexer.md

@@ -1,4 +1,4 @@
-# How to Run an Indexer Node?
+# How to run an indexer node?
 
 ## Video guide