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.
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.