forked from forem/forem
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
VS Code Settings Update / Frontend Debug Documentation (forem#4346)
* Added Edge debug configuration for VS Code. * Added frontend debug documentation. * Some copy updates. * Added the debugging docs to the TOC.
- Loading branch information
1 parent
051128f
commit 9866c58
Showing
5 changed files
with
39 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
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. | ||
|
||
- [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools) | ||
- [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) | ||
- [Safari Developer Tools](https://support.apple.com/en-ca/guide/safari/sfri20948/mac) | ||
|
||
## Visual Studio Code | ||
|
||
[Visual Studio Code](https://code.visualstudio.com) (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](https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code) and the [Edge Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge). | ||
|
||
Setup: | ||
|
||
- Refer to the repsective 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](/vscode_launch_debugger.png '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](https://code.visualstudio.com/docs/editor/debugging#_logpoints), watches etc. | ||
|
||
## Where is My Editor Debug Configuration? | ||
|
||
If you do not see your editor here, consider contributing to the documentation. 😉 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,6 +5,7 @@ items: | |
- webpacker.md | ||
- preact.md | ||
- liquid-tags.md | ||
- debugging.md | ||
--- | ||
|
||
# Frontend Guide |