How to inspect tree of tabs
- How to start debugger for Tree Style Tab?
- How to inspect the sidebar?
- How to inspect the background page (master process)?
- How to capture tabs?
- How to collect debug logs of TST?
- How to collect startup logs of TST?
- How to collect a performance profile?
(generated by Table of Contents Generator for GitHub Wiki)
- Type
about:debugginginto the address bar and hit the Enter key. - Choose "This Firefox" at the left pane.
- Find "Tree Style Tab" from the list and click the
Inspectbutton. - Then a debugger tab is opened.
- Start the debugger for TST.
- On the top-right corner of the debugger window, there are some buttons, so click the
Select an iframe as the currently targeted documentbutton. - Choose
/sidebar/sidebar.htmlfrom the list.- If you are opening multiple browser windows with their sidebar, you'll see multiple entries in the list.
-
/sidebar/sidebar.htmlitems 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.htmlitem in the list.
- Choose the
Inspectortab.
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.
- Open the Web Inspector by pressing Ctrl+Shift+I or by right-clicking and selecting
Inspect. - Open Web Inspector Settings by clicking the three dots
...on the top-right corner of the inspector window and then selectingSettings. - Ensure that both
Enable browser chrome and add-on debugging toolboxesandEnable remote debuggingare checked. - Open the Browser Toolbox by pressing Ctrl+Alt+Shift+I or selecting
More toolsand thenBrowser Toolboxfrom the three-bar menu in the top right of the window.
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.
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:
- Start debugger for TST and choose the sidebar you want to inspect.
- Right-click on the node
<div id="tabbar" ...>(sidebar) or<div id="all-tabs">(background page) in the tree, and chooseCopy=>Outer HTML. - Switch to the
Consoletab and runJSON.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].
- Go to TST's configurations and turn the checkbox "Development" => "Debug mode" on.
- Start debugger for TST.
- Choose the "Console" tab.
- Click the dustbox icon to clear old logs.
- 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')
Startup logs will help us to understand what happened on your environment, when you see blank sidebar with failed initialization of TST.
- Start your Firefox with TST.
- Confirm that TST failed to initialize.
- Go to
about:debugging - Click "This Firefox" in the left sidebar.
- Click "Inspect" button of the Tree Style Tab item in the list of extensions.
- A debugger window is opened.
- Click iframe chooser icon and choose "/background/background.html".
- Choose "Console".
- Run a script:
import('/common/MetricsData.js').then(ns =>console.log(ns.default.toString())) - Collect the output.
- Click iframe chooser icon and choose "/sidebar/sidebar.html".
- Run a script:
import('/common/MetricsData.js').then(ns =>console.log(ns.default.toString())) - Collect the output.
Collected logs may be shorter than the one on the success case, if something happens while TST's initialization, and it may help to understand where TST was failed at.
On recent versions Firefox, you need to use the browser toolbox of TST itself instead of debugger for TST.
- Hit F12 key to open the web developer tool.
- Hit F1 key, or click the "..." button and choose the "Settings" item.
- Scroll down and turn checkboxes on: Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
- Hit Alt-Ctrl-Shift-I to open the browser toolbox.
- Choose "Performance" tab in the browser toolbox window.
- Choose "Firefox" from the "Settings" list, and click the "Start recording" button, in the browser toolbox window.
- Try scrolling the tab bar and confirm it is slow.
- Click the "Capture recording" button in the browser toolbox window.
- Click the "Upload Local Profile" button in the top area.
- A popup dialog appears so click the "Download" button.
- Share the downloaded file.
On old version Firefox you can collect performance profile with the debugger for TST.
- Start debugger for TST.
- 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".
- Click the "Start Recording Performance" button.
- Do steps to reproduce a performance problem you saw.
- After a performance problem is produced, click the "Stop Recording Performance" button.
- See the left pane then you'll see a list of results like "Recording #1".
- Click the "Save" link of a recorded result. You can download a "profile.json" file.
- Attach the "profile.json" to an issue or upload somewhere.