1. <body>
2. <div>这是DIV</div>
3. <script>
4. var a = '123'
5. a +='456'
6.
7. // alert(a)
8. // console.log('a:%s',a)
9. // console.dir(a)
10.
11. // 断点是一个特殊的代码标记 程序执行到断点时会暂停执行
12. // 通过断点可以观察到正在执行的程序的内部状态
13.
14. // 所有的断点都会显示在资源窗口中形成断点列表
15. // 点击前面的筛选框可以暂时禁用或启动断点
16.
17. // var me = {
18. // name:'xiaoming',
19. // age:3,
20. // isMale:true,
21. // course:{
22. // name:'HTML5',
23. // months:6
24. // }
25. // }
26. // console.log(me)
27.
28. // 在变量窗口中可以逐层展开一个对象
29. // 深入对象内部可以查看对象的属性方法 类型 以及对象的父类
30. function add(a,b){
31. return a + b
32. }
33. var c = add(3,5)
34. // F10 逐步执行
35. // F8 一直执行直到结束遇到下一个断点
36. // F11 进入函数内部
37. // shift + F11 从函数内部跳出
38.
39. // 左下角三个按钮
40. // 第一个：开启或关闭黑盒 压缩后的代码通常在黑盒中 调试时不会进入 但可以打开
41. // 第二个:美化代码 将压缩的代码重新格式化
42. // 第三个：启用或禁用断点
43.
44. // 调用栈
45. // 函数相互调用形成的调用关系 如 A -> B -> C -> D
46. // 调用栈是从下往上调用的 最下面是代码入口
47. // 点击调用栈上的项可以看到进入下一个函数的位置
48.
49. // 事件：可以查看所有的事件监听者
50. // 勾选后事件发生时会直接暂停 就像加了一个断点一样
51.
52. var div =document.querySelector('div')
53. div.onclick = function(e){
54. alert('你点击了div')
55. }
56. </script>
57. </body>