Debugging Angular Applications in Intellij & WebStorm

Debugging Angular Applications in Intellij & WebStorm

 

Intellij IDEA (Ultimate Edition) and Webstorm has excellent support for developing & debugging Angular applications.

Before digging into the debugging part, you need to have the following plugins installed:

  1. Javascript Support (which includes Typescript)
  2. Javascript Debugger
  3. AngularJS (which includes Angular 2+)
  4. Karma (optional)

You also need to install the JetBrains IDE Support extension in Google Chrome. If you’re using Firefox, then you’re out-of-luck, Jetbrains stopped supporting Firefox.

Chrome Extension Link: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon

Both Intellij & WebStorm uses built-in web server running in port 63342 for debugging any javascript applications.

To debug the angular project, you need to create a new debug configuration:

  1. Go to Run -> Edit configurations.
  2. Click the + button (Add New Configuration) and select the JavaScript Debug.
  3. Change the name of the configuration as you like and change the URL with your application local development url which is usually http://localhost:4200/.
  4. And click ok to save the configuration.

Angular-Debugging

Now you’re IDE configuation is ready to run. You need to start the local development web server using ng serve.

  1. Run the ng server command in the terminal to start the development server.
  2. Run the debug configuration from IDE: Go Run -> Debug -> Your debug configurationn name.

It’ll open your application in the chrome browser with debugging enabled.

chrome-jetbrains

You can put a breakpoint anywhere in your angular codebase and debug the application.

angular-breakpoint

Intellij and WebStorm supports liveEdit for html pages. As you edit the content, you can see that reflect in the browser and also it will highlight the selected block of code in the browser. That’s it!.. Happy Hacking!…

Advertisements

Evernote for Linux

Evernote

Evernote is an awesome app for note taking but unfortunately it isn’t available for Linux yet. So, we can use the Evernote web app as a standalone application using the GNOME web app launcher. Since the Evernote web app is pretty clean, you don’t feel a difference at all.

From Gnome 3.10 onwards, you can launch any web app without the usual browser menus. Two browser currently supports this:

  • Epiphany (Gnome Web)
  • Chrome

Epiphany isn’t a shinny browser like Google Chrome and Firefox. It doesn’t render some pages correctly. And Firefox doesn’t support web app launchers yet. So, I recommend the Google Chrome for this job.

Chrome
1) Go to your Evernote home page (usually https://www.evernote.com/Home.action).
2) In Chrome, Click “Settings -> More tools -> Create application shortcuts…”.
3) It’ll create the necessary Desktop entry and Application Menu entry in the user’s home directory. Just click “Create“.
4) It’ll use the web app’s favicon as the Application Icon which has low resolution and not good.
5) So, to change the application icon, download the evernote icon from the internet (https://cdn4.iconfinder.com/data/icons/free-colorful-icons/360/evernote.png).
6) Go to user’s application settings directory :
cd ~/.local/share/applications/
7) Find the .desktop file which starts with “chrome” as prefix and “evernote” in the file name like “chrome-https___www.evernote.com_Home.action_2.desktop“.
8) Replace the “Icon=” entry’s value with the newly downloaded icon’s path.
9) Just logout and login.
10) Search for Evernote in your GNOME Activities, you’ll get a fancy Evernote app in your menu.

Note : I’m using Fedora 21 with GNOME 3.14.2 on it.