Wednesday, August 7, 2013

Firefox and Chrome’s Browser Debugger

It’s Christmas for all you Web Developers out there! Mozilla and Google have updated their browsers to help developers debug their websites more efficiently.  This in-browser code editor gives developers the customization control to specify their own keyboard shortcuts, external code, validation tools, and syntax highlighting colors.
Tuesday, Firefox 23 was released, Mozilla also introduced a number of new features to its Web Developer Toolbar.  Google has announced additional features to its Chrome Developer Tool as well.  This is great news for the developers out there.  There are well know issues with browser compatibility, with these news browser debugging tools the fight should be a little easier.  Also the time saved from switching back and forth from browser to code editor will free up time for other matters.

Firefox 23

The Developer

Developers are jumping for joy because their job is going to get easier. The browser debugging tools will help developers more effectively write and debug their websites. The growing use of the browser for ample interactions between users and services is more than exciting. Developers will have personalization options and be able to edit code right in the browser, disable JavaScript and even disable all other styles of code.
This means no more looking through files to find specifically where your code is, you can just click and edit right on the page.firefox-debugger-tool
This open source browser also comes with Network Monitor. This displays every action the browser takes when downloading a page, including the errors shown and loading times.
Firefox 23 can now support a range of values for the HTML5 form control. Also the introduction of Workspaces, a built-in source code editor that could eliminate the process of flipping between an external code editor and a browser to check the newly edited Web page.
Workspaces will enable the developer to edit the Web page directly using the DevTools console. If the changes are correct, they can be written back to the disk.  So using an external editor is no longer needed.

“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 JavsScript.
When the DevTools are updated, developers can now live edit their pre-processed CSS files as well. DevTools already offers the ability to save scripts, bookmarklets, and other utilities.

References:
Firefox, Chrome strengthen in-browser debugging – InfoWorld
http://www.infoworld.com/node/224333
August 7, 2013
Firefox, Chrome strengthen in-browser debugging – PCWorld
http://www.pcworld.com/article/2046063/firefox-chrome-strengthen-inbrowser-debugging.html
August 6, 2013

Don’t miss out on the latest tech news and computer security alerts! Follow us on Twitter at @hyphenet,  “Like” us on Facebook or add us to your circle on Google+

No comments:

Post a Comment