Introducing JsDbg - Browser-based debugging extensions for Chromium
sa...@microsoft.com
What is JsDbg?
JsDbg is a tool that provides browser developers with a web-based platform for native debugger extensions. Browser developers can use this tool to visualize large and complex data structures within the web platform, such as the DOM tree and accessibility tree. Unlike traditional debugging extensions that are debugger specific, JsDbg extensions are written with web technologies to run in the browser, which allows them to work across platforms and debuggers. By leveraging the benefits of HTML/CSS/JS, the extensions can also have richer user interfaces and functionality than what is typically present in a debugging extension.
How can I learn more?
In addition to reading the details below and visiting the JsDbg GitHub repo, you can learn more by attending our talk about JsDbg at BlinkOn 10. We will demonstrate how you can incorporate JsDbg into your daily workflow and also how you can contribute to the project.
Using JsDbg
Supported debuggers and platforms
JsDbg currently supports WinDbg and the Visual Studio debugger on Windows. Support for additional debuggers (ex. GDB) and platforms (ex. MacOS) will be available in the future. For instructions on how to use JsDbg with WinDbg or the VS debugger, please refer to the JsDbg README on GitHub.
Using JsDbg extensions
There are several ways in which browser developers can incorporate JsDbg extensions into their debugging workflow. Some of the common ways are given below. For a more extensive list, please see the JsDbg features document.
JsDbg incorporates a convenient UI for viewing tree structures, such as the DOM tree. Below is an example showing the use of the DOMTree extension to inspect the DOM for a YouTube video page.
JsDbg also provides an interactive way to explore a type and its associated fields. This feature is called the type explorer. It allows users to inspect an object and its relationships in great detail, and see a broader picture than what is generally possible with just a debugger. Below is a screenshot of the type explorer being used with the AXTree extension - an extension to visualize the Chromium accessibility tree - to explore the attributes associated with a form.
JsDbg extensions are not only useful in live debugging scenarios, but
are also helpful for post-mortem debugging, ie. inspecting crash dumps. When
F12 and helper functions are no longer available, JsDbg's visualizations
continue to work, and can therefore help browser developers assess state contained
within a dump.
Future ideas
· Mac/Linux support
· Extensions for other parts of the browser
· Cross-process debugging extensions
· Control more of the debugger from JsDbg
How can I help?
Contributions from the Chromium community are more than welcome. Contributions are not limited to the “future ideas” mentioned above – if you have additional ideas, we would love to hear them! Please feel free to reach out to me or file an issue under the JsDbg GitHub repo. For more details about contributing, please see the Contributing to JsDbg page.
Ian Kilpatrick
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/142a2a57-e163-4dc2-958b-b2820f4b2456%40chromium.org.