Is there a way to beautify JavaScript and CSS in Firebug?
I'd like to be able to view formatted JavaScript code instead of the compressed version :).
There is now a plugin that intercepts JavaScript downloads and deminifies it at that point.
Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type.
https://addons.mozilla.org/en-US/firefox/addon/247565/
CSS is already beautified in Firebug, as clearly seen by comparing the CSS tab or CSS pane with the raw source.
JavaScript, alas, is not. The best you can do, for now, is to paste the code into something like http://jsbeautifier.org/ .
However, if you write a Firebug extension that does this, you will have all of our gratitude. ;-)
Firefox Developer Tools has:
"Prettify Source" button: braces {} icon on bottom left
"Auto Prettify Minified Sources" setting: turns Prettify Source on by default.
To enable it: go to the engine icon on top right of the Debugger tab, not the global settings engine.
Tested on Firefox 42.
Related
I'm updating an old extension, passing from the old XUL code to html/css "chrome" code.
I have an issue with the "options_ui" tag in my .json file... if i load the extension using the current firefox version (46.0.1) i can't see the "options" button of the extension (as shown in about:addons).
But if i load it using the current developer version (48.0a2) it shows and works as espected.
Any suggestion of how can i fix this?, there must be a way to show the options button without using XUL code.
This is the section of options_ui in my json file:
"options_ui": {
"page": "html/options.htm" },
I have the same problem, here's what I found https://blog.mozilla.org/addons/2016/04/29/webextensions-in-firefox-48/ .
Seems that Firefox WebExtensions will be fully functional from v.48, that's why the Options button is so far only visible in the developer version of Firefox.
I'm injecting a css file from my chrome extension using the manifest.json (full source):
"content_scripts": [
{
"matches": [
"http://*/*"
],
"css":["src/inject/gfi_extension.css"],
"js": [/*...*/]
}
]
In Chrome Dev Tools, if I inspect an element which is affected by the injected css, the rules are visible, but in the upper right where the source filename would normally be, it just says "injected stylesheet." I'd like to view ALL of the rules being injected, even those that affect elements which do not currently exist in the DOM.
I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.
Is there a way to view the .css file through dev tools? If not, please explain why there isn't.
Edit: I've just found that this question also appears as a "sub-question" of this one, however no one over there has attempted to answer it, even though there is an accepted answer.
Looks like there's no way to do this if you inject the CSS via content_scripts. I filed a bug here: https://crbug.com/800070
When the extension is in your control, Paul Irish suggests using this code pattern in order to make your styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master
For other people's extensions, as far as I can tell there's no way to view the source code of the injected stylesheets in DevTools, if you go the content_scripts route.
Go to Sources and then Content Scripts. You have to go to the extension name and then you'll see the injected files.
Use the Chrome App and Extensions Developer Tool on an extension which injects CSS, such as Bootstrap Grid Overlay:
the injected URL can be used on the console tab on the app to get the runtime URL using the getURL method:
chrome.runtime.getURL("src/grid.css")
and produce the source:
References
Content Scripts - Google Chrome
chrome.runtime - Google Chrome
With the release of Firefox 25 we saw a huge improvement in their development tools. SO much so that I'm rather excited to try them out over Firebug.
However I can't see how to turn on Sass debugging, which is currently working in Firebug. I've looked in all the settings that are offered within the development settings.
I'm hoping I'm wrong and it is currently supported.
With Firefox 29 the support for Sass and LESS files was introduced.
Taken from https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
You have to right-click in the Rules section and activate Show original sources option:
Now CSS rule links will show the location in the original file, and
clicking these links will take you to the source in the Style Editor.
From there you can go on to the Styles Editor and edit your Sass/LESS file. Functionality needs Source Maps enabled!
The best suitable way to debug Sass in Firefox seems to be FireSass.
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
I see this one time, and know that it not so hard, but can't find any solutions in internet.
Let say I have plugin, as you know it written by XUL. XUL like HTML has tags, js and etc. So I want to debug it with Firebug.
But in default plugin view firebug (as all other plugins disabled). So i need to open my plugin like Web page.
I remember that it's something like
chrome://address/to/my/plugin/page.xul
Does anyone face this problem?
There is no general rule by which you can build the addresses of extension pages. You have to open the extension's XPI file (it's a regular ZIP file, rename it if necessary) and have a look at chrome.manifest inside. E.g. in Firebug's chrome.manifest it says:
content firebug content/firebug/
Which means that the files in the content/firebug/ directory of the extension are accessible under chrome://firebug/content/. You can try opening them as web pages but they won't necessarily work.
A better approach would be using tools that are actually meant for extensions. For example Chromebug or DOM Inspector.
I recently installed Adobe Dreamweaver CS4. When I tried to code in javascript, all my code is written in pink font. I checked my Preferences > Code Coloring then choose Javascript. I was surprised to see that it only recognizes 3 types of code: jQuery Identifiers, jQuery Keywords and Methods, jQuery objects. I do code jQuery, but I want to see the previous color coding from my pass Installation (Macromedia Dreamweaver version XX). What can I do to revert or add these native code types so I can set their syntax color. I'm just used to seeing these codes more color-coded. Thanks in advance!
I ask because I have the following options when I open up the JavaScript code coloring options:
JavaScript Bracket
JavaScript Client Keywords
JavaScript Comment
JavaScript Default Text
JavaScript Function Keyword
JavaScript Identifier
JavaScript Native Keywords
JavaScript Number
JavaScript Operator
JavaScript RegExp
JavaScript Reserved Keywords
JavaScript String
I just checked in CS4 and CS5 and those entries are present in both, there are no entries for jQuery. Have you installed an extension that provides jQuery support (at least code coloring)? If you have, then I'd suggest you uninstalling it and the modifications may be reverted.
If you have uninstalled the extension, or if you don't have an extension installed, and the code coloring is still awry, to get back to the original code coloring that's built into Dreamweaver, you may need to perform step 12 on this page:
http://kb2.adobe.com/cps/191/tn_19105.html
For CS4 and CS5, the folder to remove will have a "language" folder that the Configuration folder is within. On my Vista system for CS5, it's at:
C:\Users[username]\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\configuration\