For this week's Shopify developer resource I'm going to call out Browser DevTools.
As a web developer in any environment, learning to use the tools available to you will make your work go so much faster. We live in the browser when developing for Shopify brands, so learning how to use these tools will make you run faster and jump higher (metaphorically speaking, of course).
As a web developer in any environment, learning to use the tools available to you will make your work go so much faster. We live in the browser when developing for Shopify brands, so learning how to use these tools will make you run faster and jump higher (metaphorically speaking, of course).
Browser DevTools
Some of the most helpful things you can do with DevTools that are consistent across browsers includes:
- Identifying elements and styling: when you finally figure out your styling isn't working because some other dev threw an `!important` declaration on something silly. *sigh*
- Running Javascript directly in browser console: I use this all the time to check the Cart, Clear, or other random things when testing out some theme functionality.
- The Network Tab: figuring out what's happening on the page as it loads or after specific events is extremely helpful as well.
This isn't a comprehensive list by any means - DevTools are incredibly powerful and useful, but these are actions I rely on DevTools to help me do my job on a daily basis.
Learn More About DevTools
You'll find some crash courses on DevTools (Traversy Media and freeCodeCamp tutorials are always high quality) if you want a glimpse of all the cool stuff you can do there.
As well, there is always the documents that you can consult:
As well, there is always the documents that you can consult:
If you're a DevTools wizard, link to your favorite resource or tell me what your favorite trick is!