Hexo Theme Building With Chrome Developer Tools

I’m using Hexo as my blogging platform and wanted to customise the theme, which is broken down into many different parts to make it easier to manage and customise. In order to understand what the different parts did I fired up Google Chrome deverloper tools to quickly explore the styles of Hexo’s default theme.

Google Chrome browser developer tools

With Chrome developer tools you can explore the source code (HTML, CSS and JavaScript) of any web page and see which part of the page each line of code is responsible for. This is a great way for quickly seeing which CSS classes and ID’s are used to control styles, as well as seeing which block of JavaScript is providng dynamic behaviour on the page.

Running the Chrome developer tools

Right-click and select “Inspect Element” on any page you are browsing to bring up the developer tools console. You can navigate through

Chrome developer tool Resources

TODO: List any follow on tutorials & videos that help you make the most out of these developer tools.

In Summary

Using the Chrome developer tools is a fast way to explore the elements that make up your web page and should help speed up testing and bug fixing. So get familiar with these tools and get even more productive.

Thank you.
@jr0cket

---

This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket