Easier debugging/inspecting of remote tab state with the Browser Content Toolbox

Matthew N. MattN at mozilla.com
Tue Oct 3 23:15:41 UTC 2017


With bug 1401343 <https://bugzilla.mozilla.org/show_bug.cgi?id=1401343>
fixed, `TabChildGlobal`s for the attached content process are exposed via a
`tabs` getter in the Browser Content Toolbox's console tab. This makes it
much easier to inspect a remote tab's state or to access privileged APIs
related to remote tab content. The motivation for this change is to make it
less tedious to inspect remote tab state with e10s, especially without
add-on shims/CPOWs.

For those of you who don't know, when the "devtools.chrome.enabled" pref is
true the Web Developer > Browser Content Toolbox opens a toolbox targeting
the content process that the selected tab is loaded in. From there you can
access `tabs` in the Console tab to get an array of the `TabChildGlobal`s
(which have access to the content Window object via `content`).

Examples:
1) Access a ChromeOnly property on an element: `tabs[0].content.document.
querySelector("#myEl").nodePrincipal`
2) Add an event listener to a tab child:
`tabs[3].addEventListener("change", tabs[3].console.log)`

Bug 1346316 <https://bugzilla.mozilla.org/show_bug.cgi?id=1346316> tracks
giving easier access to the selected tab's TabChildGlobal and making the
frame picker work (to more easily change between `TabChildGlobal`s by URL).

Happy debugging!
Matthew Noorenberghe (:MattN)
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/firefox-dev/attachments/20171003/f2cb9b26/attachment.html>


More information about the firefox-dev mailing list