How to retire console.log and Debug like a Boss in your browser

How to test it on the browser using sources tab

1. Open the DevTools:
   • In Google Chrome: Right-click on the web page and select "Inspect" or press Ctrl+Shift+I (or Cmd+Option+I on Mac) to open the DevTools.
   • In Mozilla Firefox: Right-click on the web page and select "Inspect Element" or press Ctrl+Shift+I (or Cmd+Option+I on Mac).
   • In Microsoft Edge: Press F12 or Ctrl+Shift+I (or Cmd+Option+I on Mac).
2. Navigate to the Sources Tab:
   • In most browsers, you'll find a tab labeled "Sources" or "Debugger." Click on it to access the Sources tab.
3. Select the Appropriate File:
   • In the Sources tab, you can see a file tree on the left side. Locate the file where you want to test your code. This can be an HTML file, JavaScript file, or any other resource.
   • Also if you want you can press Ctrl+P or Ctrl+Shift+P to search for the file you want to access.
   • Usually the file that we want to inspect is inside the domain’s folder or in “localhost” folder.
4. Set Breakpoints (Optional):
   • If you want to pause execution at specific points in your code, you can set breakpoints by clicking on the line number in your code file. A blue breakpoint marker will appear.
5. Run or Resume Execution:
   • You can run or resume execution of your code by clicking the "Play" button (or pressing F8) in the toolbar of the Sources tab. If you set breakpoints, execution will pause at those points.
6. Use the Console and Debugging Features:
   • You can interact with your code by typing commands into the Console tab, which is usually located at the bottom of the DevTools panel. This allows you to test JavaScript code, log variables, and check for errors.
   • Be aware that the console has the scope of the breakpoint you are running, you can inspect as if you were coding inside your component or inside a method execution.
   • The DevTools panel also provides access to the Call Stack and variables. You can inspect the values of variables and step through the call stack to understand the flow of your code.
   • DevTools provide various debugging features like step into, step over, and step out, which allow you to navigate through your code one line at a time.
7. Inspect Network Activity (if needed):
   • If you're testing network-related code or AJAX requests, you can use the Network tab to monitor network requests and responses.
   • You can also set a “fake network” that is slower for performance testing purpose.
8. Make Code Changes:
   • If you need to test code changes, you can edit your code directly in the Sources tab, then save the changes.
9. Reload the Page:
   • If you make changes to HTML or CSS, you may need to refresh the page to see the effects of your changes.

How to test angular structures

Angular applications are composed of a hierarchy of components, services, and modules. Debugging such complex structures can be challenging, especially when you need to inspect and manipulate the internal state of Angular components. This is where ng probe and ng getComponent come into play.

1. ng probe

• ng probe is a powerful debugging tool that allows you to access and manipulate the internal state of Angular components from your browser's console. It is part of the Angular DevTools package and provides a convenient way to interact with your application's components at runtime.
• To use ng probe, you'll first need to install the Angular DevTools extension for your web browser (e.g., Chrome or Firefox). Once installed, you can open the DevTools panel and select the "Angular" tab. Here, you can use ng probe to select components, inspect their properties, and even modify them. This is incredibly helpful when you need to diagnose and fix issues that are not apparent from the surface.

1. ng getComponent

• ng getComponent is another Angular debugging feature that allows you to retrieve a reference to an Angular component from the browser's console. You can use it to interact with the component and access its properties and methods. To use ng getComponent, you can execute the following command in your browser's console:

ng.getComponent(selector)

Why do these tools only work on development builds?

While ng probe and ng getComponent are incredibly powerful for debugging Angular applications, it's important to note that they only work on development builds and not on production builds. This limitation is due to several reasons:

• Performance Overheads: Debugging tools like ng probe and ng getComponent introduce performance overheads. They provide direct access to the application's internal structures, which can impact the application's performance. In a production environment, performance is crucial, and the overhead introduced by these tools is unacceptable.
• Security Concerns: Allowing access to the internal state of an Angular application can pose security risks in a production environment. It may expose sensitive data or allow malicious actors to manipulate the application's behavior. By restricting these tools to development builds, Angular maintains a higher level of security.
• Developer Convenience: During development, it's common for developers to use debugging tools to inspect and manipulate components. These tools provide valuable insights that aid in the development process. In a production build, such debugging capabilities are unnecessary and could potentially lead to unintended consequences.
• Size Optimization: Production builds of Angular applications are optimized for size and performance. Debugging tools and extra code that facilitates debugging are typically stripped out during the production build process to reduce the application's footprint.