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.
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).
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
Related
I am trying to test sample code for web extension for browsers.
But, it doesn't work. I checked the console for Google Chrome and also for Firefox. It doesn't print anything. The following is my code:
manifest.json:
{
"description": "Demonstrating webRequests",
"manifest_version": 2,
"name": "webRequest-demo",
"version": "1.0",
"permissions": [
"webRequest"
],
"background": {
"scripts": ["background.js"]
}
}
background.js:
function logURL(requestDetails) {
console.log("Loading: " + requestDetails.url);
}
chrome.webRequest.onBeforeRequest.addListener(
logURL,
{urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");
Am I missing something?
Your code is correct as written, it works and outputs to console.
If you are not seeing it, then you are, probably, looking at the wrong console.
1. Firefox
Mozilla describes what extension output can be seen in which console in their Debugging article.
Browser Console
The Browser Console no longer shows output from WebExtensions background pages by default. You can have it show output from all WebExtensions by selecting to display "Show Content Messages", which is available from the popup that opens when you click on the gear-like symbol "⚙️" in the upper right of the window, just to the right of "Requests". Depending on what you are doing, the Browser Console may show output from a WebExtensions Experiment. You can access the Browser Console from Tools➜Web Developer➜Browser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).
In older versions of Firefox, this was the console to use to see output from extensions. However, that is no longer the case.
Browser Toolbox
If you have it enabled, you could also use the Browser Toolbox console. You can access it from Tools➜Web Developer➜Browser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I). If it is not available you can enable it through options from the Web Console settings page.
The console in this toolbox will show output from both scripts running in the background context and from content scripts. However, complex data will not be available (e.g. no Objects).
Add-on Debugger
This is what you should be using to view console output from scripts running in the background context of your WebExtension. This includes background scripts, scripts running in popups, options pages, and any other page loaded from the extension as the main URL for a tab, or iframe. You can access the Add-on Debugger though about:debugging➞Inspect (use the "Inspect" button that's associated with the WebExtension you are debugging; there's a separate button for each extension). This will open a new tab with the debugger. You can then click on the Console tab within that browser tab. This console will display only content from the WebExtension which you are inspecting.
Web Console
You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on's background scripts. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).
2. Google Chrome
Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).
Background Scripts
As explained here, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.
It is much easier to show what you have to do:
Content Scripts
Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.
Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.
If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).
Popup (built-in)
Right-click on your browserAction button and select "Inspect Popup". Alternatively, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.
Options
Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.
Devtools extension panel
Same as Options above: right-click inside + inspect.
In case your panel intercepts the right-click or in a bugged Chrome 97/98, open devtools-on-devtools, then use its picker button in the toolbar of the Elements panel (or press Ctrl-Shift-C on PC) to select your panel in the original devtools window.
Tab or popup (detached) with a page from your extension
When a tab or a detached popup window is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".
Note, the "detached popup" here means a window without an address bar, which is created using window.open or chrome.windows.create. There was another type called "panels", but it's no longer supported in modern Chrome.
Which console are you viewing in for the logs?
If you are viewing console on a tab, then that is the wrong place.
Open settings / Extensions or in a new tab type
chrome://extensions
Under your extension click on "background page" link which is where you can watch for logs
**Make sure Developer mode is checked
Yes for Chrome you have to click the background page link mentioned, but it won't be there unless you set it to be persistent:
"background": {
"persistent": true,
"scripts": ["background.js"]
}
How to make the console of the Firefox DevTools multi-line?
I am aware of the Shift+Enter keyboard shortcut, which makes the command line go to the next line. Though like in Firebug, I want to vertically separate my console into command line and results part, but I can not find that functionality.
You can try the scratchpad. Go to Settings >> Available Toolbox Buttons and check the box for scratchpad. Refer the screenshot:
Once done, you'll have a notepad-like icon in your developer console navigation bar on the right side.... Click on it and it will open a scratch pad on which you can write code and execute...
Good Luck.
Firefox Developer version(v70) has multiline console which can be activated with ctrl+b (on linux at least, I havent found the shortcut in the offical docs). So this will soon show up in mainline FF i guess.
The command line the Firefox DevTools has a "smart multi-line" feature. That means it detects when a command is not finished and automatically inserts a line break, e.g. when you write document. and hit Enter. As you mentioned, you can also insert a line break manually by pressing Shift+Enter.
The DevTools also offer a completely separate command editor panel called Scratchpad, which you can enable via the settings (under the Default Developer Tools* section).
There is currently no multi-line editor as a side panel like Firebug's Command Editor, but it is already requested.
This is also described in the migration guide for Firebug users.
I'm not really sure how to best word this, but let's say I'm on a web page and when I click a certain button, something undesirable happens. Like a whole bunch of content disappears. Is there a way in the Firefox debugging tools where I can insert a watch on that button so when I click it, the debugger will pause the JS execution and show me exactly where in the code it's executing the stuff I don't want?
(note: obviously this is code I did not write, otherwise I'd know where to look to fix the problem)
Yes, in the debugger there is an events pane, and you can break when a specific event is triggered. The documentation is here:
https://developer.mozilla.org/en-US/docs/Tools/Debugger#events-pane
Firefox has a good built-in profiler - you can click the start profile, and click it again to end, and see what parts of the code are running the most.
This is really helpful in finding performance problems too.
As of a few days ago, whenever I open the developer tools in Chrome on OSX the 'drawer' automatically opens - 2nd screen shot
The icon in blue shows/hides the drawer (now defaults to on) - First screen shot
This is so annoying and I cant figure out a way to stop this behaviour. It never did this before....
This was annoying me to no end and I could never figure out why it was automatically opening. Apparently the fix, at least in my case, is that I went into the Emulation tab inside of the drawer and disabled any of the overrides. Everything in blue is highlighted as an override. Disabling those seems to have fixed the problem for me.
Offering Phil Rykoff's comment as a solution...
Disabling JavaScript source maps seems to do the trick for me.
Settings > Enable JavaScript source maps
I was getting an error parsing my source maps so this could well be the cause for those with similar errors:
Failed to parse SourceMap: https://myapp/vendor.map
Found the solution press the "Escape" key when you're on the Developer Tools
There is also a setting under Appearance -> Show 'Emulation'/'Rendering' view in console drawer which will turn them off by default. But if you have some overrides then the panel still popup when you open Developer Tools.
In the DevTools, click the hamburger-icon.
Click 'Hide console'
Further to Ed's solution (which did fix my problem) the issue appears to be that the whatever page you are viewing is generating a console error- which in this case just happens to be a SourceMap error.
Because the default tab on the Dev Tools pane is "Elements" it appears that Chrome opens the console drawer so that the error message is visible when you reload. Rearranging the tabs in the Dev Tools so that console is the first item solves the issue, and I could re-enable SourceMap errors.
If Firefox is already displaying a local HTML file on my PC in a tab (address = "file:///...") and I modify the file using my favorite external editor, sending the file to FF to display the edits results in FF opening a new tab with a fresh instance of the original file, rather than searching to see if the file is already open it it and reusing that tab.
Sure, after editing the file I could reopen Firefox, navigate along the tab bar to the existing tab for that file and click Refresh. But IMO FF should be capable of doing this for me. In my work, by the time I need to refresh FF, the tab currently open is not likely to be that of the file I am editing, so I continually need to return to the original page to refresh it.
My efforts to work around this include:
1)In about:config, *setting browser.link.open_newwindow* from 3 to 1.
2)Running Firefox and passing it either the filename or the URL to the filename (as -url parameter).
3)Looking for a suitable add-on.
I am not fond of either Firebug or Aurora and prefer my own editor (EditPlus), which with I am far more comfortable, to edit web pages. However, its inbuilt browser does not display properly on my screen, so I need to view results of edits in Firefox.
Can anyone suggest a solution to this problem? I've searched here without success. The best solution would be another about:config setting. Thanks in advance.
(added) After all, in EditPlus, if I send it a file (in document-centric mode) which it has already opened, it simply changes focus to the existing tab. Why can't FF do this?
Thanks for suggesting the "Restore Open_External" add-on.
I tried it but it doesn't help me here. What it does is:
(quote)
"browser.link.open_external (Integer). This option specifies how Firefox opens links launched externally, e.g. e-mail or Microsoft Word. 3 options are available;
1. Selecting this option launches the link in a new tab in the most recently active Firefox window. This would be recommended if you don’t wish launching such links to affect your most recently active webpage and you aren’t concerned about the links content.
2. Selecting this option launches a new Firefox window to view the link. This would perhaps be the safest option to select (In that if you launch something questionable you may be able to end the process without affecting other windows).
3. Selecting this option (default) launches the link in the most recently active Firefox window/tab. This would be recommended if you aren’t concerned about launching links is the most recently active window/tab (You can always use the back button to view the previous page if you need)."
TechSpot - Firefox 2 Tweak Guide
I'm sure many find this useful. Option 1 would have been fine for my purposes if it didn't insist on opening a duplicate tab. This add-on does nothing to prevent duplicate tabs being opened. So I began hunting for some add-on that might PREVENT a new tab being created in response to an external app sending a file to Firefox. Tab Mix Plus is supposed to do this, but I got lost somewhere in the maze of options. Then there is Prevent Duplicate Tabs, which creates a whitelist of all pages where duplicates are not permitted. This is far from automatic and seems pretty lame to me, as is Duplicate Tab Closer which doesn't prevent a duplicate tab from being created; instead, you have to press Ctrl+Alt+D to remove existing duplicate tabs - equally lame. deduplicate-tabs is similar, but offers a button to remove duplicate tabs.
Maybe I'm missing the point, but I can't see why anyone would want duplicate tabs of the same page, one a later version than the other. In fact, FF ought to be able to automatically refresh a tab when one reselects this, without having to resort to the "refresh" button. But that's just my rant.
If anyone reading this can think of a better way to integrate FF with an external app that modifies a web page, I'll be most grateful.
Install that addon:
https://addons.mozilla.org/en-us/firefox/addon/restore-open_external/
Go to addon preferences and set:
'in the current tab of current window'
Next time you open a new url from an external program it opens in the same tab.
You can also install the
duplicate tabs closer firefox addon which, as the name suggests, allows you to automatically close duplicate tabs
You can configure it to:
Close the older tabs and keep the new tab
Select the new tab
Try this addon.
I'm using it for development mode in Gatsby and Create React App.