Browser developer tools are the most important part of web design and development. All modern browsers allow you to create, edit or test your web pages. WordPress Developers can use developer tools to create and edit WordPress themes quickly and very easily.

Recommended Reading

• WordPress Development Tools Series Main Page
• Download 15 Free Books To Master HTML, CSS, JavaScript, jQuery, Bootstrap And WordPress
• 38 Free Video Courses To Learn HTML, CSS, PHP, jQuery, JavaScript, Git And More

I have been using Chrome Web Developer tools to edit web pages for a long time, It is a common practice to use these tools. Web and WordPress developers use browser developer tools to edit CSS quickly and easily.

Chrome Developers tools make it very simple and easy to edit WordPress themes, I have written a tutorial How to Edit CSS in WordPress Theme Using Chrome Developer Tools

But do you know you can even use browser developer tools to test your WordPress themes on real devices, You can also create and edit almost all files of WordPress themes with Chrome developer tools using Sources and Remote Debugging feature?

With the remote debugging feature you can run your local WordPress site on your Android device. You will have to use Port Forwarding feature.

Browsers Developer Tools

So it’s time to explore all the amazing features, which these browser developers tools offer.

1. Chrome Developer Tools
2. Firefox Developer Tools
3. Safari Web Development Tools
4. Opera Dragonfly
5. Microsoft Edge Developer Tools

9 Tutorials to Learn How to use Browser Developer Tools

1. Video: Chrome Developer Tools Device Emulator, and more!
2. Tutorial How to use Chrome DevTools like a Pro by Ibrahim Nergiz at Medium
3. Chrome DevTools official Documentation
4. Remote Debugging on Android with Chrome
5. Testing Mobile: Emulators, Simulators And Remote Debugging By Jon Raasch at SmashingMagazine
6. Using Firefox Developer Edition For Web Development by Tanay Pant at TutsPlus
7. Everything You Need to Know About Firefox Developer Tools by Brenda Barron at ElegantThemes blog.
8. My Workflow: Never having to leave DevTools by Remy Sharp
9. Using Chrome DevTools Workspaces for Faster WordPress Development By Devin Walker

10 Firefox Addons for Web and WordPress Developers

1. View Source Chart color­coded and foldable page source view
2. HTML Validator integrates with source view
3. Web Developer Add on for Firefox
4. ColorZilla is an Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.
5. MeasureIt for Firefox lets you Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
6. WordPress Code Reference to Search the WordPress Code Reference:.
7. WordPress Developers Shortcuts
8. WordPress Codex to Search the WordPress Codex website.
9. qSnap – Screen Capture, Screenshots, Annotation addon. Capture multiple Web pages, crop, annotate, add callouts, add notes, cover sensitive information. Save files to locally or their free hosting service. Share a file URL or save locally to your computer.
10. FireFTP : is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers.

9. Chrome Extensions for web developers

1. ColorZilla is an Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.
2. PHP Console Chrome: Display PHP errors & vars dumps in Google Chrome console and notification popups, execute PHP code remotely. It works offline as well.
3. Web Developer Add on for Chrome
4. MeasureIt for Chrome Draw out a ruler to get the pixel width and height of any elements on a webpage.
5. WordPress Site Manager stores WordPress sites and also brings more functionality to the theme editor.
6. WPSniffer Detects active WordPress theme and host being used on current WordPress website.
7. WordPress Style Editor save CSS changes made in developer tools, directly to the WordPress stylesheet.
8. Dimensions allows you to measure everything you see in the browser, such as images, input fields, buttons, videos, gifs, text, and icons. Just drop PNGs or JPEGs mockups into Chrome, activate Dimensions and start measuring.
9. Check My Links link a ilnk checker that crawls through your webpage and looks for broken links.

6. Miscellaneous tools for browsers

1. Emmet Re:view: A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.
2. LiveStyle: In LiveStyle, You can connect browser style sheets with files from your editor. It gives you unmatched flexibility: you can use files from your hard drive, USB, FTP, network mount or even new, unsaved files. Available for MAC and Windows. Changes are transmitted from the editor to the browser and the browser into the editor. LiveStyle updates CSS in the browser immediately, as you type. No more file saving or page reloading just to see how single update affects web page. Emmet LiveStyle Docs
3. WP PHP Console: An implementation of PHP Console on GitHub as a WordPress plugin. Use Chrome Dev Tools to debug your WordPress installation!
4. DebugBrowser.com: With web developer extensions, you can debug broken web pages and provide better feedback to web developers.
5. SEO Doctor solid no­fluff on­page SEO check. SEO Doctor is a modern SEO tool with one simple goal – make your website better optimized for search engines through an easy to understand, step by step, scoring and recommendation system
6. browser sandbox Spoon.net’s browser sandbox for cross­browser testing. Test any browser instantly online such as Opera mini 6, Opera 35, Firefox mobile 2 or FireFox 45, Chrome 49 or any other version.

Final Words

That’s all for this article in this series, don’t forget to join our WordPress Theme Development Newsletter to receive latest articles and tutorials about WordPress theme development.

Note: This article was originally published at createwptheme.com, we have republished it here with permission.