Catch JS breakpoints in IDEA

How to debug JS from IDEA

Always wanted to place and catch breakpoints right into IDEA rather than doing it in browser's Dev tools.
It's fairly simple, it boosts your development speed and requires only two steps:

Add JS debug configuration

So, add JavaScript Debug under your Run/Debug Configuraton page in IDEA and point to the host you want debug.

Install JetBrains IDE Support extention

Install this IDEA extension, and run your JS Debug (Shift+F9)

So, here is our caught breakpoint:

---- ### Debug TS in Intellij IDEA > TypeScript code is not processed by browsers that work with JavaScript code. > Therefore to be executed, TypeScript code has to be translated into JavaScript. So, catching breakpoints in TypeScript requires exactly same steps. You just need to generate <a href="https://code.tutsplus.com/tutorials/source-maps-101--net-29173">source-maps</a> during the transpilation. To do it ensure, that source-maps are enabled in your _tsconfig.json_ file: ```JSON "compilerOptions": { ... "sourceMap": true } ``` ## see Also * [Boost your TypeScript code quality with TSLint](http://bloomlab.blogspot.com.ee/2016/06/boost-your-typescript-code-quality-with.html) * [Pair your Total Commander file manager with Cmder console](http://bloomlab.blogspot.com.ee/2017/03/pair-your-total-commander-file-manager.html) * [Boost your web development speed with LiveReload](http://bloomlab.blogspot.com.ee/2016/04/boost-your-web-development-speed-with.html) * [IntelliJ IDEA Help - Run-Debug Configurations](https://www.jetbrains.com/help/idea/2016.1/creating-and-editing-run-debug-configurations.html) * [Chrome Dev Tools - Workspaces](https://developer.chrome.com/devtools/docs/workspaces) * [Web Component Frameworks 2015](http://bloomlab.blogspot.com.ee/2015/03/web-component-frameworks-2015.html) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)