• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article describes how to debug JavaScript in Google Chrome.

The test code

Create a new test.html file and say:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
		
        alert("Hello World!");
	document.write("Hello World")
        var vAlert={};
        vAlert.show=function(msg){
            alert(msg);
        }
var test_var = 'test world'
        vAlert.show("Test");
	console.log('Hello World')
console.log(test_var)
    </script>
</body>
</html>
Copy the code

The test and operation

  • Open Google Chrome

  • Run the test. The HTML

  • F12, exhale developer mode

  • Go to the Sources TAB

  • Add breakpoints in JS code, F5 refresh, step by step

  • The web page will display the code execution effect, and the corresponding output in the console, you can also debug the current environment code in the console