How do you modify client-side code with browser dev tools?

1 What are browser dev tools?

Browser dev tools are a set of tools that are built into most modern web browsers, such as Chrome, Firefox, Safari, Edge, and Opera. They are designed to help web developers and designers test, troubleshoot, and optimize their web applications. Browser dev tools can be accessed by right-clicking on any element of a web page and selecting "Inspect" or by pressing the F12 key on your keyboard.

2 How to edit HTML and CSS code?

One of the most basic and useful features of browser dev tools is the ability to edit the HTML and CSS code of any web page. To do this, you need to open the Elements panel, which shows you the structure and style of the web page. You can select any element on the page by clicking on it or by using the element picker tool. You can then edit the HTML code by double-clicking on the element tag or attribute and typing your changes. You can also edit the CSS code by expanding the Styles tab and modifying the properties and values. The changes will be reflected on the web page immediately, but they will not be saved unless you copy and paste them to your source code.

3 How to edit JavaScript code?

Another feature of browser dev tools is the ability to edit the JavaScript code of any web page. To do this, you need to open the Sources panel, which shows you the files and scripts that are loaded by the web page. You can select any script file by clicking on it or by using the file navigator. You can then edit the JavaScript code by double-clicking on any line and typing your changes. However, unlike the HTML and CSS code, the changes will not be applied until you reload the web page. You can also use the Console panel to execute JavaScript commands and see the output.

4 How to debug JavaScript code?

Browser dev tools also provide you with tools to debug your JavaScript code and find errors and bugs. To do this, you need to use the Debugger tab, which allows you to set breakpoints, step through the code, and inspect the variables and values. You can set a breakpoint by clicking on the line number where you want the code execution to pause. You can then use the buttons to resume, step over, step into, or step out of the code. You can also use the Watch, Scope, and Call Stack tabs to see the values and states of your variables and functions.

5 How to use other browser dev tools features?

Besides editing and debugging code, browser dev tools also offer you other features that can help you improve your web applications. For example, you can use the Network panel to monitor the performance and loading time of your web page and its resources. You can use the Performance panel to record and analyze the CPU and memory usage of your web page. You can use the Lighthouse panel to run audits and get suggestions on how to optimize your web page for accessibility, performance, best practices, and SEO. You can use the Application panel to manage the data and storage of your web application, such as cookies, local storage, and service workers.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?