Windows dev tools desktop inspector how to#
Windows dev tools desktop inspector code#
Windows dev tools desktop inspector mac#
Windows dev tools desktop inspector windows#

That’s what `ace()` is for, as it doesn’t only tell you that something was called, but also where the call came from. Once you have that the next thing you normally want to find out what called that method. Often you find yourself adding a `console.log(‘called’)` or similar to test if a certain functionality is even triggered. Using `assert()` makes that one redundant and you have one less thing to worry about when cleaning up your debugging code. Often you find yourself writing an `if` statement with a `console.log()` inside. Another interesting method is `console.assert()`, which only logs a message when a certain condition is met. Errors and assertions in Consoleĭisplaying an error in the console is different to throwing an error, but it still is a good idea to show the severity of an issue to the person maintaining or debugging the product. This not only results in slighty different displays in the console, but it also gives your messages a different log level, which means it is easier to filter for them. For example, `console.warn()` logs a warning, `()` an informational message, and `console.error()` an error message. In addition to `console.log()` you have a lot more methods you can use. For example, when you use the following code, you get a list of numbers, but you don’t know what is what. The next problem with using `console.log()` is that we seem to only log values and forget to add where they come from. Using these you can filter the reporting of the console to the things you care about and block out a lot of the noise. Finding the information you’re looking for becomes daunting and the best way to work with that is to learn about the console filtering options available to you. The first problem is log messages that aren’t removed when a product goes live clogging up the Console.

Windows dev tools desktop inspector how to#

There are a few problems with that, and there are better ways to debug scripts, but as this is what people do, let’s talk how to make that experience better.

Windows dev tools desktop inspector code#

Specificially, people love to debug by putting a `console.log()` in their code to learn what’s going on. There is no doubt that, besides the Elements tool, Console is the most used part of the browser developer tools. (All browsers with developer tools following the standard) Here’s a write-up of all the things I covered: 1. You can watch the recording of the talk on Youtube. I am a principal product manager for developer tools in Microsoft Edge and these are things I encountered during working on the tools, documenting them and going through user feedback. This is a talk that I’ve given at CityJS this September. Some functionality is only available inside Visual Studio Code via the Edge DevTools for VS Code extension.

Windows dev tools desktop inspector mac#

But some of the things I am talking about here are experiments and exclusively in Microsoft Edge, which is available on Windows, Mac and Linux.

Edge Developer Tools work closely with Google on bringing the work we add to the product back into the Chromium Core. They differ in UX and services around the core.

Windows dev tools desktop inspector windows#

As a reminder: Microsoft Edge is the browser that comes with Windows 10/11 and is based on Chromium and thus from a platform perspective simular to Chrome. This is Chrome, Microsoft Edge, Brave and many more. When I state “Chromium browsers”, this refers to all browsers that use the Chromium core and also feature all the Developer Tools. Update: As this is blowing up on Hackernews I added information to each of the tips in which environment they are supported in parenthesis after each heading.