Developer toolbox is exactly what it sounds; it is a set of many tools for developers to make their own extension. The toolbox also allows you the option for remote debugging and inspect the code that’s running in Thunderbird. The tools that are available to you are like: Web Console, Inspector, Debugger, Style Editor, Network Monitor, and much more.
Developer Toolbox in Thunderbird
To go to the developer toolbox, you can hit the keyboard shortcut key: Ctrl + Shift + I, go to ‘Tools’ -> Developers’ tools -> Developer Toolbox
In the earlier version of Thunderbird, you first have to enable the debugger server. This can be done by going to Tools and selecting Allow remote debugging. Now when you open the developers’ toolbox, you will get a prompt asking to allow the remote debugging, like showing below:
Click “OK” to start debugging.
The developer toolbox is like as shown below in the screenshot:
At the top, there will be all the different tools that you can go to, like: Inspector, Console, Debugger, Network monitor, and all the rest.
Below is some basic introductory information about each tool:
Inspector:
It’s the DOM and style inspector that helps you examine each element of the page in the Thunderbird. Click the inspector icon and then click the section in the Thunderbird window that you want to examine. It’s used to modify and examine the HTML or CSS code of the particular page/part of Thunderbird.
Console:
This is the web-console tool that logs all the information of the page, such as java scripts, network requests, warnings and errors, and more. This also allows you to interact with a webpage by executing your own java scripts. When you click on any element inside the console, you are taken to the respective section of the toolbox. For instance, when you click on the JavaScript links, you will be taken the ‘Debugger’ and any CSS link will take you to the “Style Editor.”
Debugger:
This is the most important part of the developer’s toolbox that allows you to go through the JavaScript codes to track down any bugs. The debugger has two main sections: list of sources and the particular source. Click on the source item on the left that you want to examine and its code will be shown on the right-hand side. On the extreme right, there is another panel that is dependent on the state of the debugger. Usually it includes toolbar, watch expressions, MOM mutation breakpoints, and more.
And then there are also network monitor and performance monitor, where you can see the network requests and the performance/responsive respectively. The performance panel shows you the details over some period of time that can help you examine the speed and resource utilization with precision. Network monitor can also help you in seeing the speed regarding how long each request to a network takes.
If you want, you can turn off all these different tools and leave only the ones that you want. To do so:
Click on the options icon at the top right side ->
Here you can see all the various settings and options for the developer toolbox that you want to modify according to your needs:
If you have the basic skills of developing apps, you will find this toolbox intuitive and self-explanatory. The UI is simple enough that you can start inspecting elements or changing the code as you want.