DevTools hacking tricks

Developer Tools
1

Hi all,

I just picked up my first DevTools bug and I’m pretty much a n00b :smiley:
Do you have any advice on how to debug the DevTools? Are there any hidden tricks?

I picked up a bug on the DOM panel bug and I’m having trouble debugging the right files. I went to about:debugging and loaded the addon from gecko-dev/devtools/install.rdf and I want to debug. It’s all good and fine but I only see these files

[Album] Imgur: The magic of the Internet

I actually want to see the dom-panel.js in the debugger: I asked around on IRC and found the “dump” function but I guess there has to be some trick so I can debug the devtools with the devtools in all the files and not the limited list in the image.

How do you debug this sort of situation? Do you have any sort of cool tricks good for a DevTools n00b like me?

Andrei

2

Thanks for picking up that bug, that’s great!
I think what you are looking for is the “Browser Toolbox”. This is essentially DevTools for DevTools. It’s another toolbox that inspects and debugs the toolbox that is in your browser.

We have some docs on MDN to get started using it.

The debugger in the Browser Toolbox will be showing you all scripts currently loaded, which will be a lot of them. So you can use Ctrl+P to search for dom-panel.js for example. That will make it a lot easier.

The addon you mentioned is good for reloading your changes made to DevTools without having to restart or recompile Firefox. There is some doc about this too here: https://developer.mozilla.org/en-US/docs/Tools/Contributing/Contribute_on_nightly

I hope this was useful!

1 Like
3

Thank you for the fast answer! I will check the browser toolbox then. I never knew that the two highlighted check boxes actually did :smiley:

4

In addition to what Patrick said…

If the bug occurs on the server side (that is, in the actors), then you will need the “browser content toolbox”. That’s because the actors run in the process with the content, not in the chrome process with the tool front ends.

Sometimes there are bugs that are difficult to debug with the debugger. There are some debugger bugs where, sometimes, code can run while the debugger appears to be stopped at a breakpoint. (These bugs are the result of a platform issue in Firefox, and are quite hard to fix, which is why they are still around…) In a case like this I just resort to logging.

1 Like
5

Thank you @tromey! I don’t think I will be picking up actor-related bugs for now. Just n00b stuff :smiley:

I just opened the Browser Toolbox and now everything is like

TheMatrixWallpaper1024.jpg1024×768 200 KB

https://memegenerator.net/instance/76049728

6

Actually I might be asking too much to run React and Redux DevTools inside the Browser Toolbox but I want to see the flow of state. Usually I did this with the mentioned devtools but for Angular for example I could get the Angular element by running something like this in the console: angular.element($0).

Is it possible to do something similar with React+Redux?

I want to get a good understanding before I actually start hacking and use the best tools I have at my disposal.