B-san's Blog

Hello everyone. Today’s post is a bit more technical. It is about Chrome DevTools…

According to Google, the creators of Chrome DevTools…

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

With DevTools you can view and change any page. Even the Google homepage…

https://developers.google.com/web/tools/chrome-devtools/

While I use a Windows PC at my desk, I use an iPhone and iPad when I am out and about. I have used Chrome as my default browser for some time now, because it syncs my activity across every one of these devices. I knew you could check the source code of Internet sites with the browser. However, today, I finally realized the full potential built into its DevTools…

HTML is the language browsers read, interpret and use to display the content of web pages for us. CSS is what is used to design those web pages. So, the content is written with HTML, the design is determined by the CSS. With the Premium and Business plans at WordPress.com, you have access to advanced CSS editing. That means, you have much more freedom at how you can design the content of your site. For example, you can change the color, size, shape or location of a button on a page using CSS, whereas with the Free plan, you would be stuck to choose from the limited options provided.

Lately, I have been trying to focus my forum volunteer efforts on issues that involve CSS editing. To do so, I have been creating similar posts/pages on my own site and then editing the CSS code through the WordPress.com editor. As you can imagine, “creating a similar post/page on my own site” is not that easy. Many times, people have a problem they want fixed. So, I would first have to figure out how to duplicate the problem on my site before I can work on finding the solution??

But with the DevTools, I don’t need to do that! I can edit the code of their site directly! Of course, the changes I make only affect what I see on my computer… I can’t edit the content of their site for them. However, it mean I no longer have to try and duplicate their problems! I can dive straight into debugging for them!

For those who are interested, the Chrome DevTools explanation page gives a great tutorial course on all the functions of the dev tools in regards to CSS editing. Until now, I have only used DevTools to look up code on people’s site. Now, I have realised you can edit it and see the changes in real time!

Some problems people face in the forums are WordPress.com specific, so I would still have to work in the WordPress.com environment to help them out. But for purely CSS related questions, Chrome DevTools is definitely the way I will be going from here on??

Thanks for reading!