When I say “Dev Tools” in an email or when talking to someone in person, what I mean are Developer Tools, which are utilities that are a part of web browsers. These tools allow one to look at the code behind a website, including the HTML, CSS and Javascript. They’re called Developer Tools because they can be used to both develop websites and to fix bugs and issues in sites.
Dev tools are incredibly useful and save lots of time, because one of the functions of dev tools is that they allow you to change CSS on the fly and see the changes right in the browser. And dev tools contain a console that will show you Javascript errors, too. You can test the network speed of a site, look for missing images and other 404 errors, test the site by with different user agents (desktop or mobile), and on and on. Dev tools are really the first place to start with troubleshooting an issue with any website, and for any novice or anyone first getting into development, learning dev tools is a very good place to start.
In relation to WordPress, I use dev tools to work with themes and CSS. I can tweak CSS right in the browser, see how the changes work, and if I want to make them permanent, I edit the theme’s CSS file. I reload the site in the browser and check the changes, and keep working. Dev tools are also very handy to look at a site I’ve been asked to work on. The tools will show me Javascript errors, other code errors and give me some idea of the work involved. Dev tools are really the first place to look, along with running the site through the W3C Code Validator at The W3C Markup Validation Service (more on that in another post).
I mostly use Safari as a web browser, so I use the dev tools available in Safari. If you use Safari don’t already use dev tools or have a menu item titled “Developer” in the top Safari menu bar, enable them this way: go to your Preferences (Safari menu >> Preferences) and then go to the “Advanced” tab and at the bottom tick the box that says “Show Develop menu in menu bar.” That will give you a new menu item. On any website, pull down to “Show Web Inspector.” That will open up a new window in the bottom half of the browser and give you tabs and screens of everything that is happening on the web page.
Dev tools window open on the home page of https://markratledge.com
Dive in and play around with dev tools on a site. See what the different tabs show you. Change some CSS in the elements and look for the changes. Look at the scripts that have loaded. You can’t break a site because what you’re doing is changing the website only in your browser and not on the server.
Think of dev tools as a huge tool box that you can use on the engine of a car while it runs, knowing that you can’t break anything or bust your knuckles. The best way to learn is to jump in. See Apple for more information on Safari’s Developer Tools: Safari’s Developer Tools.
I also use Firefox sometimes, and Firebug is a great plugin that provides dev tools. Firebug was about the first implementation of dev tools for browsers, before Safari and IE. Get Firebug here and install it. For Chrome, dev tools are built in, like Safari. See Chrome DevTools — Google Developers. And if you use Internet Explorer, you can usually press F12 to get to dev tools. See the Microsoft Developer Article How to use F12 Developer Tools to Debug your Webpages.