The console comes with a lot of convenience methods you can use called the Console Utilities. The table structure is maintained when you copy and paste this information, which makes it a wonderful tool to get data into Excel or Word, for example. If you filter down to what you are interested in by using `console.table(elms,)` you get a table with only these properties and their values. As the different elements have a boatload of attributes and properties, the resulting table is pretty unreadable. The `console.table()` method displays array-like data as a table in the console, and you can filter what you want to display by giving it an array of the properties you want to see.įor example, you can use `let elms = document.querySelectorAll(‘:is(h1,p,script’)` to get all H1, paragraph and script elements from the document and `console.table(elms)` to display this information as a table. If you want to display a lot of of information as a log, it can become daunting to read the information. You can even define if the groups should be expanded or collapsed by default.ĭisplaying and filtering lots of information in the console as tables If you have a lot to log, you can use `oup(‘name’)` and `oupEnd(‘name’)` to wrap the messages in collapsible and expandable messages in the Console. 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. 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. 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. 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. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |