I looked at the newest nightly that is really close to a real diet :-) Please add a comment in the bug if you have thoughts about other things that are too big. The overall paddings have already shrunk quite a bit for the 29 release, and there are just a couple of things remaining before we can shrink the secondary toolbar height. Hello, we are working on putting the theme on a padding diet here. Is there a plan to offer a Theme that let more space for the page content, especially on smaller screens?īy the way great progress on the DEV Tools, unfortunately everyone is complaining about Firebug, as most developers does not know about the progress Mozilla made on the internal DEV-Tools. The DEV-Tools feels really heavy, as all widgets uses a lot of space due to paddings. Actually I was thinking about sourcemaps and Firefox today. Nice! The FF Dev tools are really starting to give more mature solutions a run for their money. Sign up for the Mozilla Developer Newsletter: More articles by Robert Nyman … Discover great resources for web development He regularly also blogs at and loves to travel and meet people. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. Gives talks & blogs about HTML5, JavaScript & the Open Web. Technical Evangelist & Editor of Mozilla Hacks. Aboutįirefox developer tools developer at Mozilla, working mainly on the style tools. The source has to be saved to disk and file watching set up in order for style changes to take effect.
#FIREFOX DEVELOPER EDITION EDIT CONFIG UPDATE#
Now when you edit an original source and save it, the page’s style will update and you’ll get immediate feedback on your Sass or Less changes. The devtools will infer the location of the generated CSS file locally and watch that file for changes to update the live style sheet on the page. Save the original source to your local file system by hitting the Save link or Cmd/Ctrl-S:
Sass index.scss:index.css -sourcemap -watchįor Less, you’ll have to set up another service to do the watching, like grunt. You can edit original source files in Style Editor tool, but order to see the changes apply to the page, you’ll have to watch for changes to your preprocessed source and regenerate the CSS file each time it changes. 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: Check off the Show original sources option: Right-click anywhere on the inspector’s rule view or in the Style Editor to get a context menu. The devtools will use this source map to map locations in the CSS style sheet to locations in the original source. css.map source map file for each CSS file, and add a comment to the end of your CSS file with the location of the sourcemap: /*# sourceMappingURL= */. To do this you’ll need Sass 3.3+ or Less 1.5+.
When compiling a source to CSS, use the option to generate a sourcemap for each style sheet. The Firefox developer tools use source maps to show the line number of rules in the original source, and let you edit original sources in the Style Editor. Luckily you can now do this in the Firefox 29 developer tools using source maps. If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Sass and Less are expressive languages that compile into CSS.
0 kommentar(er)
