You can’t do that directly, since it is not available in the global scope, but you can do this by adding a break-point at the function declaration. So, say you want to inspect a variable defined in the function. When that line is about to be executed, script execution will be paused.įor ease of use, you can hit the Esc key to toggle the split console drawer, which allows you to see the console (and some other tabs) together with any of the main tabs. By clicking on a line number, you can add a breakpoint for that line of the script open in the file area. The sidebar on the right is for JavaScript inspection.
Clicking on any one will open that resource in the File Area. The sidebar shows the directory listing of all the static resources loaded for the webpage presently open. Explaining each and every function of this tab is not possible in one article, but here is an overview. Let me know what you think below in the comments or on Twitter.This is probably the most powerful place in the developer tools. I don't think I have to convince you that wasn't a good idea. Regular users don't get the extra baggage and potential risks.Īlso, do you know what other piece of consumer software that also includes developer tools as part of the "regular" edition? Microsoft Office. The people who need and want the developer tools will know how to get them. I suggest removing the developer tools from the regular version of Firefox and only inlcude them in the Developer Edition. Which leads me back to my original point: why are the developer tools there anyway? Message in the developer tools console on There's a reason Facebook shows this message when opening the developer tools: They might be told to run something as harmless as document.querySelector("html").style.opacity = 0 or something much more sinister. Remember, this is CLI access to all code running on the site. They're only seeing a complex UI with lots of buttons and text they don't understand.īut they might also be tricked to open the developer tools by another person and run commands in the JS console. Most regular users will probably try to close the tools as soon as possibly when they're opened.
Most of these are more or less harmless in the hands of non-technical users and semi-harmless in the hands of users who think they what they're doing, but don't. You can edit the content, the markup, the styling, the JS code, local storage, cookies, almost anything. The developer tools also include features to manipulate web pages. I don't think we need to inlcude any more complexities to the web than the user already has to contend with. Regular users have to pay a prize in installation package size, update size, resource use and UI complexity because of a small minority which use and depend on these features.
When anyone non-technical asks me what they are for, I just reply something akin to "just click the little X and don't worry about it, it's some nerd thing". I don't see why they would need it or what they should use it for. I've find it a bit strange that web browsers targeted to regular end users include tools to debug and inspect the code of web pages. I think this should be the case for all the major browsers. In other words, the regular version of Firefox should not include the developer tools. Firefox Developer Edition should be the only version of Firefox that has developer features. It looks like it's going to be a kind of beta version. You'll be able to test upcoming features, whithout being on the bleeding edge. This version is supposed to be a bit ahead of the regular release of Firefox. Mozilla (the creators of Firefox) has also started releasing a Developer Edition of Firefox. I actually quite like the new version 57 of Firefox (or Firefox Quantum as it's also called). I recently switched from using Chrome as my main browser to Firefox.