Want a quick and dirty way to test an idea with your website?
Today’s Tactic feature is coming straight from one of our genius web developers. We’re sharing a best-kept secret that’s gonna help you get your test on – the Chrome Development Tools.
What is the Chrome Dev Tool?
Think swiss army knife. It’s having a variety of tools in one nifty place. With Chrome Dev Tools, you can view and manipulate pages, debug and test code, audit for performance and accessibility, and much more. All totally free.
How do I use the Chrome Dev Tools?
Let’s say you’re in the middle of a rebrand and want to test out new fonts or colors. You can use basic prototyping with Dev Tools. Want to learn how?
- Right-click any element on a web page and then choose “Inspect” from the menu.
- This will launch the Dev Tools “Elements” panel and show you the underlying HTML of the page you’re on (with that element highlighted).
- In the corresponding “Styles” panel, you can see which CSS styles are directly affecting that element and tweak their values.
Easy peasy! Make temporary changes to any element on a page and preview the results in real-time before diving into any code.
Read the full blog and check out the video tutorial. Smash that button!
