The Google Chrome developer is a reliable, feature-rich tool to quickly change the various sections, pages, and elements of your WordPress websites. For enjoying the maximum potential of a chrome developer tool, you need to gain some key information about using the same. In this blog, we are going to discuss the various ways in which you can use Google chrome to un-complicate your WordPress development process and boost the time to market.
Open Chrome Tools
· Go to the top pane of Chrome browser and click the Menu (Three vertical dots on the extreme left)
· Go to Tools> More Tools and open Developer tools
· Now right click on the desired page elements and select inspect element from the menu. You will see a small window section at the bottom of the browser. It is called DevTools window
· You will see a more organized view of DevTools with task-specific categories.
· The toolbars contain all the key items to modify/render information about specific page types and elements like resources, DOM elements, etc.
Inspecting the DOM content of a selected portion of your page
· On the right panel, select Elements tab in the top portion of Developer Tools
· Click on the desired portion of the site and the corresponding code will be highlighted in Developer Tools
· You can change the code and instantly see the modifications in the visual design
· For a detailed understanding of how to identify and inspect various DOM elements you can go through this post on Google: https://developers.google.com/web/tools/chrome-devtools/dom
CSS/HTML editing
You can go through the editing tutorial by visiting this link: https://www.designveloper.com/css-and-css3-tutorial-beginners/
Preview of code modifications
Elements panel enables you to preview any modifications in the coding directly in your browser. It gives you a precise idea about the actual output before making final changes to the source code. It saves you from guesswork, unnecessary repetitions and stress.
Along with the entire HTML code of different sections, the elements panel also enables you to see the CSS styles of any specific HTML section.
· All you have to do is to take your mouse pointer over the page elements for which you want to see the HTML code, right click and select "inspect" from the menu
· Its HTML code will automatically be highlighted in the source code.
How to preview live changes in browser
· Select the desired element
· Now select DOM element in the Developer panel
· Double click the opening tag that you want to edit and type the desired value (color, size etc.)
· Make the desired changes and it will be visible in your internet (In the above screenshot we have changed the color of Google Background to Black)
CSS rule tracking
Monitoring different CSS rule for any specific elements becomes an uphill task when your site starts growing that inflates the CSS codebase.
· The Elements panel takes the complexity out of the process by highlighting all the rules of any specific HTML elements. It also shows you the various other elements to which any specific CSS rule is applied.
· Right click on the desired portion of the page and click Inspect
· You will see the developer tools in the right pane
· In the Style Pane you can see the styles applied to various elements on that page
· If you wish to see only the styles applied to a specific element/portion then click on Computed tab
Responsive layout testing
It isn’t an easy task to test your site on different mobile devices due to the diverse variety and sizes available in the market but Chrome Developer Tools makes it easier and quicker:
· Go to the Toggle Device toolbar of developer tools (the second icon in the top pane of chrome developer)
In your left window pane you will see different options to change the layout/size of the current page as per the specifications of various mobile devices
· Once you are there, just go to the pre-built configuration of any Android or iOS device to see how your site will actually appear in that specific device
It also offers various other features to select the desired preview (like selecting dimensions, zoom in/out, online/offline mode etc.)
Tip: While it already has the rebuilt configuration of all the most widely used devices you also have an option Select the custom dimensions as per your choice. It saves you a lot of time and can also help in reducing time to market.
Check multiple specifications of WordPress
When working on the big projects it becomes imperative to closely scrutinize all the major specifications of the WordPress theme to determine its relevance, suitability, and potential
· With the help of developer tools you can conduct a 360-degree analysis including site structure, Performance potential, consistency, major elements and dozens of other aspects.
Coding Inspiration
It is not ethically correct and legally permissible to copy the code of any website; however, you can take inspiration or learn some fine points about the coding by studying their codes. It will hone the coding skills that can help you in enhancing your career and expect better income opportunities along with other benefits. The developer tools allow you to quickly study the codes of the professional, well-designed websites so that you can sharpen your coding skills and learn to give a professional touch to the overall website.
The style pane of Elements panel will allow you to modify the styles of the different sections of a webpag, Like :
· Modifying any name, value or property
· Inserting desire property declarations
· Inserting CSS rule.
Edit an existing property name or value
Click the desired page element or the specific HTML element (related to the CSS)
· Now edit the property value by clicking on it
· Press Tab/enter for modifying property name
Keep in mind that refreshing will wipe out any changes made to the CSSS so it is highly advisable to copy and paste it to your text editor.
Add a rule
Many people might have a tough time matching the element and the relevant selector
· You can simply use the new style rule button. It is present on the top portion of Style pane.
· Click on the desired website element
· Click the + button
· You will see the nested styles and thus saves you from searching it repeatedly
A simple example
- Go to the webpage that you would wish to use for inspecting elements or CSS modifications
- Now look at the chrome developer window in the right pane and click the Computed tab that will show the attributes list for the inspected element
- Take your pointer to the desired attribute. You will see an arrow appearing near its value. Clicking it will take you to the styles tab
- Click the value or the attribute and type the desired value to make changes to any specification like color or dimensions.
Conclusion
The chrome developer tools reduce the efforts and time needed in the WordPress development process without compromising on the quality of the output. If you have a good knowledge of using chrome developer to modify WordPress websites, you can actually cut down the effort and time needed for each project that would help you do more in less period of time and with fewer efforts.