🖌️
Product Process Documentation
  • Product Process Documentation
  • Definition of Done (DoD)
    • General checkpoints
      • Specific checkpoints by team
    • Important process: QA review & PO review
      • QA Review
      • PO Review
  • Work Items
    • Product Backlog Item (PBI)
    • Bug
      • Basic rules for creating a bug
      • How to report a Bug
    • Bugs Management
  • Code Standards
  • Different Test Levels
    • Unit Test
      • Frontend Unit Testing
        • What is a Unit Test?
        • How do I know if I am developing a good unit test?
        • AAA (Arrange, Act and Assert)
        • Overloaded test suits
        • Setup & Teardown
          • JEST Mocks
          • FakeTimers
        • Istanbul Annotations
        • C8 Annotations
        • JEST Runner (Debug unit tests with Jest)
    • Component Test
      • Frontend Component Testing
        • What is Component Testing?
        • Best practices
        • Bad practices
        • Setup
          • Sandbox
          • Mocks, Services and Providers
          • Test scenario
    • Integration Test
      • Frontend Integration Testing
        • What is a Integration Test?
        • AAA (Arrange, Act and Assert)
        • Best Practices
        • Bad practices
        • Setup & Teardown
        • How to create a scenario
          • Create the migrated app
          • Add to project
        • How to debug
        • Common problems
      • Testing Driven Development Guide and recommendations
    • Functional Test
    • Security Testing
      • Security Testing Tools
      • Frontend Security Testing
    • Performance testing
    • Best Practices
    • Test Documentation
  • Run test projects
    • General steps
    • Specific steps by team
  • DevOps
    • Pipelines
    • Builds
    • Specific information by team
    • Test plan
    • Service Hooks for Azure DevOps Notifications
      • Slack Notifications
      • Microsoft Teams Notifications
  • Dashboards
    • General
    • QA Dashboards
  • Release Process
    • General Steps
    • Specific steps by team
  • Migration Cells
    • Basics of testing process
  • Release process
  • References
Powered by GitBook
On this page
  • Step 1
  • Step 2
  • Step 3
  • Step 4

Was this helpful?

  1. Different Test Levels
  2. Integration Test
  3. Frontend Integration Testing

How to debug

Step 1

To debug the application we must have the project configured. Check that the following lines of code exist in the angular.json file.

angular.json
{
  "projects": {
    "samples": { 
      "architect": {
        "build": {
          "configurations": {
          ---------------------------------------
            "debug": {
              "sourceMap": {
                "vendor": true,
                "scripts": true
              },
              "optimization": false,
              "outputHashing": "all",
              "namedChunks": false,
              "aot": false,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": false
            }
          ---------------------------------------
          }
        },
        "serve": {
          "configurations": {
            "production": {
              "browserTarget": "samples:build:production"
            },
          ---------------------------------------------
            "debug": {
              "browserTarget": "samples:build:debug"
            }
          ---------------------------------------------
          }
        }
      }
    }
  }
}

Also verify that you have the following scripts in the package.json file.

package.json
{
  "scripts": {
    "start": "ng serve",
    "debug": "ng build -c debug"
  },
}

Step 2

Now simply run the command "npm run start", this starts a local development server for your application. You should see an application similar to this:

Step 3

To debug the application you need to open DevTools, to do this just press the key combination "Ctrl + Shift + C", you should be seeing something like this:

Step 4

Finally, just go to the Sources Panel. If you press the key combination "Ctrl + P" you can open the file you want to debug.

You can now add breakpoints in your files and debug the application.

If you need to debug a build project, just run the command "npm run debug" instead of "npm run build", and repeat the steps starting from number 3.

PreviousAdd to projectNextCommon problems

Last updated 2 years ago

Was this helpful?