How to inspect tree of tabs

• How to start debugger for Tree Style Tab?
• How to inspect the background page (master process)?
• How to inspect the sidebar?
• How to capture tabs?
• How to collect debug logs of TST?
• How to collect a performance profile?

(generated by Table of Contents Generator for GitHub Wiki)

How to start debugger for Tree Style Tab?

1. Type about:debugging into the location bar and hit the Enter key.
2. Find "Tree Style Tab" from the list and click the Inspect button.
3. 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.

If you see any fatal problem around TST's startup process (in such cases the sidebar may show only a throbber and get stuck), run gMetricsData.toString() in the Console tab of the debugger. It reports detailed report of the startup process, and the report may help debugging.

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.

If you see any fatal problem around TST's startup process (in such cases the sidebar may show only a throbber and get stuck), run gMetricsData.toString() in the Console tab of the debugger. It reports detailed report of the startup process, and the report may help debugging.

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 choose the sidebar you want to inspect.
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.
3. Switch to the Console tab and run JSON.stringify(Array.from(TabsStore.windows.values(), window => { return { id: window.id, tabs: window.export(true).map(tab => Object.assign({}, tab, { favIconUrl: null })) }; })).

Then please post the captured HTML (at the step 2) and JSON (at the step 3) as extra detailed information for an issue. If there are some sensitive information, instead please e-mail it to [email protected].

How to collect debug logs of TST?

1. Go to TST's configurations and turn the checkbox "Development" => "Debug mode" on.
2. Start remote debugger for TST.
3. Choose the "Console" tab.
4. Click the dustbox icon to clear old logs.
5. Run steps to reproduce the problem you met.

On TST 2.4.22 or later, you can collect recent 1000 logs after things happened. It will help us to collect logs appearing only on the startup process of the browser itself. In the remote debugger's console, please run: log.logs.join('\n')

How to collect a performance profile?

1. Start remote debugger for TST.
2. Choose the "Performance" tab. If there is no such tab, you'll activate the panel by these steps: click the three dots at the top-right edge of the debugger, choose "Settings", and activate "Performance" listed in the "Default Developer Tools".
3. Click the "Start Recording Performance" button.
4. Do steps to reproduce a performance problem you saw.
5. After a performance problem is produced, click the "Stop Recording Performance" button.
6. See the left pane then you'll see a list of results like "Recording #1".
7. Click the "Save" link of a recorded result. You can download a "profile.json" file.
8. Attach the "profile.json" to an issue or upload somewhere.