3

enter image description here

Does anybody knows if there is a way to show a javascript code editor in Firefox Developer Tools which looks like firebug's?

I find it a lot more convenient to work this way on large, complex pieces of code, where I can see the code on the right side and the result on the left.

vsync
  • 118,978
  • 58
  • 307
  • 400

2 Answers2

4

Firefox DevTools has something called Scratchpad which resembles the code editor of Firebug.

It's a separate window, but there's a way to have it as a panel inside DevTools too.

Additionally it supports the ability to save/open scripts, has autocompletion based on tern, pretty-printing, and can even let you execute code in Browser context (which might be useful if you're ever working on the Firefox front-end itself).

pbrosset
  • 729
  • 3
  • 5
  • Thanks. it's a pale imitation of the almighty Firebug and there is no way to put the panel inside DevTools. I have the feeling you never did it yourself, correct? it only places a tiny button in the developer toolkit that can open a new scratchpad window when clicked – vsync Dec 15 '16 at 20:46
  • pbrosset is part of the Firefox DevTools team, so he knows what he's talking about. Note that you need to check the option *Scratchpad* under ***Default Developer Tools***, **not** the one under *Available Toolbox Buttons*. – Sebastian Zartner Dec 18 '16 at 00:51
2

Head over to Toolbox options (hit F12, then click on gear icon), under Default Developer Tools check the Scratchpad (this will add new tab in developer tools, like Console & ... called Scratchpad), click on Scratchpad to activate that.

As @pbrosset said, in Scratchpad you can write JS codes (it's really great) and using Ctrl+R (you need to select the code for that) or using Run button, you can run the code. the result will shown in Console tab, if you want to see Console & Scratchpad without moving to their tabs, simply hit Esc or click on Toggle split console icon.

Hope this help.

Update

Maybe you should try this add-on Console Sidebar

Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64
  • and how is your answer any different than his? it's the same – vsync Jan 03 '17 at 20:52
  • @vsync I just wanna say more details about how the users can active & use this tool. because it was too long, I decided to make it as an answer not comment. – Mehdi Dehghani Jan 04 '17 at 05:11
  • Thank you very much. anyway, this tool sucks :/ it's way behind Firebug UX – vsync Jan 04 '17 at 11:54
  • @vsync You're welcome, as you know unfortunately Firebug is no longer available for Firefox _you can use it by disabling e10s, but you know_, I think that tool is not really bad, of course there is some missed features in Firefox Dev Tools, that Firebug has, but there is no other option. let's hope for adding more cool features by Firefox's team. – Mehdi Dehghani Jan 04 '17 at 15:20
  • what is `e10s` ? I still use Firefox with firebug, what do you mean? – vsync Jan 04 '17 at 18:32
  • @vsync `e10s` is short name for `Electrolysis`, Electrolysis is the project name for Mozilla’s efforts to split Firefox into multiple processes to improve responsiveness, stability, and security, please take a look at my answer [Here](http://stackoverflow.com/questions/40800173/firebug-is-not-working-with-firefox-version-50-0/40840456#40840456) and mentioned links. – Mehdi Dehghani Jan 05 '17 at 05:04
  • Has yes, I've recently read about their effort to split tabs into individual processes. about time.. – vsync Jan 05 '17 at 09:03
  • Yes, I'm using `Nightly` version of Firefox, I think this feature is not enable by default for all users (_in Firefox stable version_) for now, it's really cool feature – Mehdi Dehghani Jan 05 '17 at 09:14
  • For me, CMD + R reloads the page (CTRL + R does nothing). +1 on a side by side of console and code like in Firebug. – 1.21 gigawatts Mar 22 '17 at 01:01