How to use the browser Developer Tool for WordPress development?

By Roman Berezhnoi April 13, 2021 116 views

How to use the browser Developer Tool for WordPress development?

Web developers need to know how to use browser developer tools. This tutorial will help you to understand how to use devtool for WordPress development. You will learn some of the basic concepts, starting with structuring and designing a web page. Browser developer tools allow you to drill down into a web page and inspect your WordPress pages code:

  • View the corresponding HTML for an element
  • Get an overview of the CSS used on a page and how the CSS is applied to an element
  • Modify code in real-time and view changes in the browser
  • View the HTTP requests made by the browser
  • Execute JavaScript code within the context of the page
  • Identify performance bottlenecks and retrieve a variety of performance metrics
  • Dig through offline resources to find out what data the page in question is storing locally

Developer tools in the browser

Before we dive into the tips and tricks of developer tools, we want to give you a brief look at the developer tools provided by the major browsers. Please note that this is not a comprehensive overview of these tools and their features, but it does provide necessary information for each device. You can use the developer tools in Chrome, Chrome Canary, and even Chromium. Safari uses the code from the Inspector Web repository. However, it may not update as often as Chrome. Firefox now comes with its own set of developer tools that has a good focus on the visual aspect of things. Today, Chrome is by far the most widely used web browser. There will always be opinions and nuances about whether it is the best browser. However, Chrome Developer Tools is often relatively underused concerning its large number of exciting features and functions geared towards web designers.

Use the element inspector.

By pressing the CTRL and U in a web browser like Chrome or Firefox, you can access the source code of the page to see its guts and how a specific detail of it is done. However, in many cases, this system is not practical since the web page has the minified code. For more useful purposes we have two alternatives – use the Inspector elements of Google Chrome Dev Tools (pressing CTRL + SHIFT + I or F12), and we can right-click the aspect on the web page that we want to investigate and select the Inspect option. It will open the inspector right at the desired HTML tag.

Modify the HTML or CSS in real-time

When we are designing a page, an exciting feature would be to add features to the CSS or edit the HTML until we get the desired result. It is a straightforward thing to do with Chrome Dev Tools using the Item inspector. Some CSS properties have more advanced managers. It allows us to select the colour and degree of transparency quickly and visually. Besides, it also allows us to switch between the different colour schemes, save the most used colours and even use a Color Dropper to extract the colour from an image or component on the web.

Smooth transitions

As with CSS colours, it is possible to customize CSS transitions using a manager specially designed for this purpose. It shows us the time function that is applied to the shifts, being able to change them between the defined modes or customize one using cubic-Bezier. We have to move each of the purple points at the ends of the time function. And customize the process of the transition.

Prepare your website with Responsive Design (RWD)

Chrome Dev Tools is prepared to manage the appearance of our website through CSS media queries charmingly and comfortably. Just press the second icon in the upper-left corner. Or press CTRL + SHIFT + M. By doing so, we will activate the Responsive mode of the browser, in which we will have the necessary tools to view the page as if we were viewing it on a mobile device or tablet since in the upper area of ​​the page we can place the device we want to emulate showing us its screen dimensions, the zoom and the current orientation of the mobile. This panel will show the mobile appearance and apply the media queries of our website, also simulate the taps or swipes with our mouse pointer.

Emulate the sensors or GPS values

In the elements inspector, we can click on the menu with three dots in the upper-right corner and select the Show console option. With it, a new lower panel will appear where we can see several tabs. The Sensors tab allows us to emulate in the browser the GPS coordinates that we could obtain with a mobile device or the orientation of the device through the alpha, beta and gamma values, corresponding to the position in the one that the device is in and that it gets.

Simulate a mobile connection

An essential part of a web page is its loading speed, not only because of the positioning aspects that may have an impact but also because of the user experience and satisfaction thereof by getting a quick reply. With Developer Tools, we can activate the Network throttling option, present in the panel that appeared in the elements inspector when clicking ESC. In this option, we are allowed to emulate the speed of a mobile connection with GPRS, 2G, 3G, 4G or Wi-Fi connection in our browser. Something beneficial to check the user experience if we browse from a mobile device in low coverage areas. At the top, we have a Disk cache option that allows us to deactivate the browser cache and be able to test continuously.

Install a dark theme from Chrome Dev Tools

If you are one of those who like dark themes in code editors, you should know that there is also an option to change the composition of Google Chrome Dev Tools to a slightly darker one. To do this, we only have to perform the following steps –

  • Open the following URL: chrome: // flags / # enable-dev tools-experiments
  • Enable the Experiments option of Developer Tools
  • Restart the browser
  • Access the element inspector CTRL+ SHIFT+ I
  • Access the Settings menu (or click F1) and then the Experiments menu
  • Activate the Allow custom UI themes option
  • Install the DevTools Theme Zero Dark extension and restart the Chrome Dev Tools

Map CSS preprocessors in Chrome Dev Tools

If we have gotten used to using preprocessors like LESS or SASS, it can be quite annoying to mentally bring the translation from the preprocessor to CSS when making changes. To avoid this, we can use CSS Source Maps. The first thing we will need is to generate them in our editor. If you use ATOM, LESS and Post CSS, you can use the less-post CSS-auto compile the package. This package allows us to generate the final CSS file already minified, with auto prefix and also to generate the source maps that we mentioned when saving the LESS file. In the same way, we can activate the Enable JavaScript source maps option to do the same with preprocessors such as Coffee Script.

Edit animations from the browser

In the latest versions of Chrome Dev Tools, some improvements have been added to CSS animations. Chrome Dev Tools shows us the keyframes with the animation frames together with the CSS, and we can even visualize the different energies on a page and modify the speed of time they take with a couple of clicks.

Performance and web optimization

If we are dedicated to web optimization tasks, or we are very interested in the performance and efficiency of our page, we can use the Network tab of Chrome Developer Tools, which shows us the requests that have been made to load the page. It gives us an exciting analysis tool to detect which files slow down the loading of the web the most, as well as a management panel to see problems or errors.

Web Optimization

Finally, if you are looking for something even more advanced, remember also that we have the Timeline tab of Chrome Developer Tools, which offers us more exhaustive and specific information: use of RAM, use of graphics card memory, number of JavaScript listeners used, HTML nodes, as well as page drawing activity and other technical data.

The Elements panel lets you view and edit elements and style information. It is the first panel. You can also access it by right-clicking an element on the page and selecting Inspect Element. There are several use cases. You may want to modify the DOM by removing a node or adding a new one. Aside from markup, the items panel is a great place to see the applied styles of a specific node. You can also add and remove types, as well as create new rules to add to your style sheets possibly.

Modifying the DOM within the Elements panel is a fairly straightforward process. You can change the type of an element by double-clicking the name of the component. Attributes can be added by right-clicking the element and selecting Add Attribute. The cursor is immediately placed where you would expect, and you can start typing the features you want to add to the component. Editing attributes is similar to adding them. The editing HTML Raw is enabled by clicking the right mouse button on an item and selecting Edit as HTML.

Conclusion

WordPress already gives web developers more than enough power when it comes to front-end development. But often, it’s good to have a way to try all kinds of things or find solutions to problems in a safe environment.

The browser Inspect Element tool does that for developers. DevTools lets you enjoy a playground where you can completely change how a page looks or what it contains, without any consequence. 

Browser dev tools can be useful for both beginners and experienced WordPress developers.

Comments ( 0 )

Leave a Reply

Your email address will not be published.

Contact us:

Thank you for your message. It has been sent.

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.