Firefox developer edition vs chrom how to#
Firefox developer edition vs chrom Patch#

On top of that, the entirety of each panel grouped together is called toolbox and is defined in devtools/client/framework/toolbox.js. The debugger for example is in devtools/client/debugger/panel.js. Worth noting, each tab in the developer tool is also a panel. There are also a lot of other folders which I won't cover here, but you can learn more by checking out this link. You can recognize each tab: debugger, inspector, memory, netmonitor, performance, and so on.Īs you'll find out by going through, each application follows more or less the same directory structure. For that reason you'll need a good understanding of Redux Redux, namely:Įvery tab in the developer tool is a React/Redux app which lives in a separate folder in mozilla-central/devtools/client. The Firefox Dev Tools frontend is a big React/Redux app made of many little apps. Firefox Dev Tools frontend: the architecture But first, let's demystify the architecture of Firefox Dev Tools.

Firefox developer edition vs chrom Patch#

Your first patch will be likely need changes because you don't know how Firefox Dev Tools works under the hood.īut that's a good thing because learning from such a big codebase and interacting with more expert developers is invaluable.Īfter cloning the repo and glancing through the code it will come the time to create your first patch. It is big, and you'll need a lot of reading through the source code before starting to grasp anything.ĭon't try to rush it, don't be like me. There are great insights into the Firefox Developer Tools architecture, but I know, you want to get your hands dirty.Ĭlone the repo (you'll need Mercurial) and make yourself comfortable with the codebase. Read every section of the guide carefully and try to not skip anything. If you want to start contributing to Firefox your first stop must be the contributor guide.

Firefox developer edition vs chrom how to#

But before going into details let's see how to get started in contributing to Firefox Dev Tools.Įnjoy! Contributing to Firefox: how to get started So I jumped in and I tried to work on the bug. With the idea in mind I reached the Firefox Dev Tools account on Twitter and the team replied promptly with a workaround.īut it turns out there was already a bug filled for the feature I wanted: Variables/values in Scopes should offer reps context menu. In the Chrome Dev Tools you can store as global not only the innermost objects, but the topmost entities as well. What I wanted as a bonus was a 'Store as global variable' à la Chrome. You can read more about watchpoints here. The Scopes panel appears in the debugger tab when you stop the script with a breakpoint, much like Chrome Dev Tools.Īs of now the only thing that you can do on an object in the panel is adding a watchpoint, that is, a watcher which fires on properties get and set. In Firefox Dev Tools I wanted a 'Store as global variable' option in the Scopes panel. Contributing to Firefox: a bit of backstory In this post I want to share my learnings in the hope that more people could start contributing to Firefox. This year I decided to contribute more to open source projects and since I've made the resolution to switch to Firefox from Chrome I've also got the chance to find an interesting bug to work on.