Shane Bartholomeusz

Geek and lover of all things tech related

Tag: Google Chrome

How To: Debug Angular apps with Google Chrome in VSCode

Overview

VSCode is a fantastic IDE for editing <insert your favourite language here> source code. Likewise Angular is a great framework for developing front-end web apps.

When developing applications, we developers usually spend most of our time in the debugger. However, out of the box there is a little bit of setup required to enable debugging of an Angular TypeScript application when using VSCode.

In this post I'll show you how to configure VSCode debugging for an Angular TypeScript application with the Google Chrome web browser.

Angular logo

The Pre-Amble …

For the purposes of this article I will create a dummy Angular web app using the following Angular CLI command:

ng new vs-code-debug-demo
Angular Web App Screenshot

Step-by-Step Guide

Now we need to configure VSCode to enable debugging. The process is as follows.

1. First, replace the .vscode/launch.json file with the following content. If this file doesn't exist, then create it.

Ideally your application should be in the same root directory, and not nested in sub-folders, otherwise you will need to amend the ‘webRoot' path e.g. ‘${workspaceFolder}/my-nested-app-files'.

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ng serve",
        "type": "pwa-chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
        "sourceMapPathOverrides": {
          "webpack:/*": "${webRoot}/*",
          "/./*": "${webRoot}/*",
          "/src/*": "${webRoot}/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*"
        }
      }
    ]
  }

2. Add the following task to your tasks.json file with the following configuration.

{
    "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "start",
        "isBackground": true,
        "presentation": {
          "focus": true,
          "panel": "dedicated"
        },
        "group": {
          "kind": "build",
          "isDefault": true
        },
        "problemMatcher": {
          "owner": "typescript",
          "source": "ts",
          "applyTo": "closedDocuments",
          "fileLocation": [
            "relative",
            "${cwd}"
          ],
          "pattern": "$tsc",
          "background": {
            "activeOnStart": true,
            "beginsPattern": {
              "regexp": "(.*?)"
            },
            "endsPattern": {
              "regexp": "Compiled |Failed to compile."
            }
          }
        }
      }
    ]
  }
  

3. That's it. We're all done! Now it's time to start debugging.

To start a debugging session, hit the F5 key or click RUN>START DEBUGGING and a terminal will open which will begin serving your web app, and a browser window will also open. Now if you add a breakpoint to your application code, you will be able to step through the code.

VSCode Terminal Screenshot

Source Code

You can find sample code for the above example at the below link, including configuration files.
https://github.com/sbartholomeusz/vscode-debug-demo

Final Thoughts

Well I hope this article has helped you configure VSCode for debugging your Angular Typescript web application.

If you have any thoughts or other alternative ways, feel free to share them in the comments below to help others out there. Happy coding 🙂

How To: Google Analytics In Chrome Extensions

Background

Google Analytics

Google has replaced its legacy analytics library https://ssl.google-analytics.com/ga.js with the new and improved Universal Analytics library https://www.google-analytics.com/analytics.js.

I’ve been working on a Google Chrome Browser Extension but had some trouble integrating it with Google Analytics. Google's own tutorial hadn’t yet been updated to use the new analytics library. In this post I'll explain how I did it.

Continue reading

Reduce Google Chrome Memory Usage

Google Chrome
As a web developer I regularly use Google Chrome for it's great debugging features. As much as I love Google Chrome it can be a bit of a pig sometimes … it lovessss eating memory!

Continue reading

© 2021 Shane Bartholomeusz

Theme by Anders NorenUp ↑