diff --git a/docs/frontend/debugging.md b/docs/frontend/debugging.md index 00bef3429..44e4c3119 100644 --- a/docs/frontend/debugging.md +++ b/docs/frontend/debugging.md @@ -9,11 +9,9 @@ title: Debugging 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) +- [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) +- [Safari Developer Tools](https://support.apple.com/en-ca/guide/safari/sfri20948/mac) ## Visual Studio Code @@ -21,10 +19,10 @@ you debug your web application. Consider learning how to use them. 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). +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: @@ -45,3 +43,14 @@ menu for debugger in VS Code') If you do not see your editor here, consider contributing to the documentation. 😉 + +## Preact Developer Tools + +Preact has their +[own developer tools](https://preactjs.github.io/preact-devtools/) in the form +of a browser extension. These tools are currently supported for Preact version +10.x and up. + +DEV currently uses Preact 8.x so the Preact developer tools are not an option, +however Preact 8.x+ is compatible with the React developer tools extension which +is available for Chrome and Firefox.