Firefox, Chrome strengthen in-browser debugging

Mozilla Firefox gives developers more customization control while Google Chrome introduces an in-browser code editor

Firefox now allows developer customizations to its code editor

Firefox now allows developer customizations to its code editor

Mozilla and Google have updated their browsers with features to help developers more effectively write and debug their websites.

With Tuesday's release of Firefox 23, Mozilla has introduced a number of features to its Web Developer Toolbar. And Google has announced features to its Chrome Developer Tools as well.

Both sets of technologies recognize the growing use of the browser for richer interactions between users and services, over and above the viewing of static Web pages.

"We still use the browser language, although most of what people do isn't browsing. You have email, calendaring, social networking -- it really is a different kind of activity," said Johnathan Nightingale, vice president of Firefox engineering at Mozilla.

Firefox 23 augments its Web Developer Toolbar with a new options panel for customizing the in-browser code debugger. Users can specify their own keyboard shortcuts, external code validation tools, syntax highlighting colors and other options.

The open source browser also comes with Network Monitor, which displays all the actions a browser takes when downloading a page, including load times and errors in processing the source code. Formerly, the browser's Web console displayed this information, but in a less visually intuitive way.

Also of potential interest to Web developers: Firefox 23 now can support a range of values for the HTML5 form control. It provides content blocking to protect against man-in-the-middle attacks. It also eliminates support for the much reviled blink effect and blink element.

Google has been paying attention to Web developers as well, updating its Chrome Developer Tools (DevTools), a set of Web authoring and debugging tools built into the Google Chrome browser.

Perhaps the most notable update is the introduction of Workspaces, a built-in source code editor that could eliminate the small but still frequent process of flipping between an external code editor and a browser to check a newly edited Web page.

With Workspaces, the developer can edit a Web page directly from within the browser, using the DevTools console. If the changes are successful, they can then be written back to disk, eliminating the need to open an external editor or IDE (integrated developer environment) altogether.

"This enables you to author and tweak your scripts and styles, instantly see those changes reflected in the browser and have them transparently persist to disk," wrote Vsevolod Vlasov, a Google software engineer on the Chrome DevTools team, in a blog post announcing the update.

The Chrome editor supports syntax highlighting for PHP, Python, Java, CSS, HTML, and JavaScript.

With the updated DevTools, developers can now live edit their pre-processed CSS files as well. CSS pre-processors are special languages that organize CSS code into formats that are easier to use and understand.

With this release, DevTool supports the popular Sass pre-processor, and Google promises to add support for the Less, Stylus and Compass pre-processors as well.

DevTools now also offers the ability to save scripts, bookmarklets and utilities so they can quickly be called up when editing source code in the browser. Google has also set up a community repository of snippets.

Joab Jackson covers enterprise software and general technology breaking news for The IDG News Service. Follow Joab on Twitter at @Joab_Jackson. Joab's e-mail address is Joab_Jackson@idg.com

Join the Good Gear Guide newsletter!

Error: Please check your email address.

Tags Development toolsapplication developmentWeb services developmentsoftwaremozilla

Our Back to Business guide highlights the best products for you to boost your productivity at home, on the road, at the office, or in the classroom.

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Joab Jackson

IDG News Service
Show Comments

Essentials

Microsoft L5V-00027 Sculpt Ergonomic Keyboard Desktop

Learn more >

Lexar® JumpDrive® S57 USB 3.0 flash drive

Learn more >

Mobile

Lexar® JumpDrive® S45 USB 3.0 flash drive 

Learn more >

Exec

Lexar® Professional 1800x microSDHC™/microSDXC™ UHS-II cards 

Learn more >

HD Pan/Tilt Wi-Fi Camera with Night Vision NC450

Learn more >

Lexar® JumpDrive® C20c USB Type-C flash drive 

Learn more >

Audio-Technica ATH-ANC70 Noise Cancelling Headphones

Learn more >

Budget

Back To Business Guide

Click for more ›

Most Popular Reviews

Latest News Articles

Resources

PCW Evaluation Team

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Aysha Strobbe

Windows 10 / HP Spectre x360

Ultimately, I think the Windows 10 environment is excellent for me as it caters for so many different uses. The inclusion of the Xbox app is also great for when you need some downtime too!

Mark Escubio

Windows 10 / Lenovo Yoga 910

For me, the Xbox Play Anywhere is a great new feature as it allows you to play your current Xbox games with higher resolutions and better graphics without forking out extra cash for another copy. Although available titles are still scarce, but I’m sure it will grow in time.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?