docbrown/docs/frontend/debugging.md
Jacob Herrington 7d0aeeefe5 Improve the clarity of the docs and fix Prettier config (#4899)
* Improve format and clarity of the docs [ci skip]

While this change produces a lot of git noise by enacting what seems
like an arbitrary linewrap on most of the files in the documentation it
will result in better version control and tracking of the changes in the
documentation.

For example, as it currently stands, if one was to make a
PR to move a comma in a sentence because each paragraph in most of the
files is on a single line, that small change would look in the git
history like the author had modified the entire paragraph. In reality,
this author just moved a comma.

This change also includes a significant number of modifications to the
more article-esque docs. Many of these docs were written in a sort of
stream-of-conciousness and aren't as easy to read as they could be.
Hopefully this is the first of several readability changes. If we could
get these docs to a more accessible reading level, we would probably see
an increase in contributions. :)

* Delegate markdown wrapping to Prettier

* Add linewrapping explanation in the docs [ci skip]
2019-11-26 08:40:53 -05:00

1.7 KiB

title
Debugging

Debugging

In Browser

Browsers ship with their own developer tools. These are amazing tools to help you debug your web application. Consider learning how to use them.

Visual Studio Code

Visual Studio Code (VS Code) is a popular editor that allows you to debug many languages including JavaScript. Thanks to remote debugging technologies, we can debug our frontend code in VS Code. When you clone the DEV repository and open the project in VS Code, you will be prompted to install recommended extensions which include the Chrome Debugger and the Edge Debugger.

Setup:

  • Refer to the respective debugger extension documentation above to ensure that your browser is running with remote debugging enabled.

  • Once you have your local installation of DEV running, you can attach to either the Chrome or Edge Debugger.

    Launch menu for debugger in VS Code

  • From there you can do all the usual stuff that you would do while debugging JavaScript in the browser: setting breakpoints, setting logpoints, watches etc.

Where is My Editor Debug Configuration?

If you do not see your editor here, consider contributing to the documentation. 😉