Skip to content

How to inspect tree of tabs

YUKI "Piro" Hiroshi edited this page Jan 26, 2018 · 18 revisions

How to start debugger for Tree Style Tab?

  1. Type about:debugging into the location bar and hit the Enter key.
  2. Check Enable add-on debugging.
  3. Find "Tree Style Tab" from the list and click the Debug link.
  4. Then a debugger window is opened and a confirmation dialog for remote debugging appears. Allow to connect.

How to inspect the background page (master process)?

  1. Start remote debugger for TST.
  2. On the top-right corner of the debugger window, there are some buttons, so click the Select an iframe as the currently targeted document button.
  3. Choose /background/background.html from the list.
  4. Choose the Inspector tab.

How to inspect the sidebar?

  1. Start remote debugger for TST.
  2. On the top-right corner of the debugger window, there are some buttons, so click the Select an iframe as the currently targeted document button.
  3. Choose /sidebar/sidebar.html from the list.
    • If you are opening multiple browser windows with their sidebar, you'll see multiple entries in the list.
    • /sidebar/sidebar.html items are sorted by the order they are initialized. If you hope to inspect the sidebar in the first browser window, you should choose first /sidebar/sidebar.html item in the list.
  4. Choose the Inspector tab.

How to capture tabs?

If you see odd behavior around tabs (broken order, invisible tabs, etc.) captured tabs will help debugging. You can capture tabs as HTML by these steps:

  1. Start remote debugger for TST and start inspector for the window you want to capture.
  2. Right-click on the node <div id="tabbar" ...> (sidebar) or <div id="all-tabs"> (background page) in the tree, and choose Copy => Outer HTML.

Then please post the captured HTML as extra detailed information for an issue. If there are some sensitive information, instead please e-mail it to [email protected].