JS Debugging

IE, Firefox, and Chrome can all be used for debugging

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
	<button type="button" id="add">Click</button>
	<p id="count">0</p>
	<script type="text/javascript">
		var _count = 0;
		var _ecount = document.getElementById("count");
		var _ebtn = document.getElementById("add");
		_ecount.innerHTML = _count;
		_ebtn.addEventListener("click", btnclick, false);
		function btnclick(){
			_count++;
			_ecount.innerHTML = _count;
		}
	</script>
</body>
</html>

JS debugging

[Elements] The left side of this tab lets you view and edit the page's HTML structure; the right side lets you view and edit an element's CSS
[Network] This tab analyzes the site's network requests and shows each request's headers, response headers, and response body.
[Sources] This tab shows requested resources, including CSS, JS, and images. You can also set all kinds of breakpoints here.
[Timeline] This tab shows JS execution time and page rendering time
[Profiles] This tab is mainly for performance tuning, including CPU time and memory usage
[Audits] This tab helps optimize front-end pages and speed up page loading
[Console] This tab is the JS console. You can view errors, print debug output (console.log()), write test scripts, and even use it to explore JavaScript APIs
[Other] Click the phone icon to debug pages in mobile mode