chrome开发者工具（二）

chrome开发者工具（二）
    一、Elements(元素）：实时编辑DOM节点和CSS样式
        查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈
        （一）双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面
        （二）点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式
        （三）点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。
        （四）查看网页的本地修改历史
        （五）点击Styles面板中修改过属性的文件名，会跳转到Source面板
        （六）点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容
        （七）拖拽节点, 调整顺序
        （八）拖拽节点到编辑器
        （九）ctrl + z 撤销修改
        
    二、Console（控制台）
        记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
        （一）控制台输出日志：通过JS代码或者命令行console.log()、console.warn()和console.error()可以将日志信息输出到控制台
             1、console.log （用于输出普通信息）===知道每个元素具体的值
                显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
             2、console.warn（用于输出警示信息） 显示带有黄色小图标的警告信息
             3、console.error（用于输出错误信息） 显示带有红色小图标的红色的错误信息
             4、console.assert 当第一个参数为false时，才会显示第一个参数的值
             5、可以根据JS条件判断输出不同的日志信息
             6、注： 当需要换到下一行而不是回车的时候，请按Shift+Enter。
             7、console.info（用于输出提示性信息）
             8、console.debug（用于输出调试信息）
             9、console.count（当你想统计代码被执行的次数）
             10、console.dir（直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等）
             11、console.time和console.timeEnd（计时开始和计时结束）
             12、console.profile和console.profileEnd（配合一起使用来查看CPU使用相关信息）
             13、console.timeLine和console.timeLineEnd（配合一起记录一段时间轴）
             13、console.trace（堆栈跟踪相关的调试）
        （二）控制台交互
            1、JS表达式计算
               可以在控制台输入JS表达式点击Enter即可得到表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你可以用Tab自动完成当前的建议项
            2、选择元素
                快捷方式    描述
                $()    返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
                $$()    返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
                $x()    返回与指定的XPath相匹配的所有元素的数组
        （三）应用
            1、源码定位
                （1）大家打开测试网页，看到页面右下方有一个推荐的图标，右击推荐图标，选择审查元素，打开谷歌控制台
                （2）在Console面板里面输入votePost然后回车
                （3）直接点击上图标红的链接，控制台将定位到Sources面板中
                （4）点击中间面板左下方的Pretty print就行了
                （5）再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了（其实这里的数字1或者91就是代表votePost方法在源码中的行号 ）
                （6）查看某一个按钮的源码，那接下来的工作便是调试了，调试第一步需要做的便是设置断点在91处上设置断点
                （7）设置好了断点后，你就会在右边Breakpoints方框里看到刚刚设置的断点。
                设置好了断点后，你就会在右边Breakpoints方框里看到刚刚设置的断点。
                调试快捷键吧（直接点击上图所示右侧栏最上层的一排按钮来进行调试，具体用哪个按钮，把鼠标放到按钮上方一会就会显示它相应的提示）
                快捷键    功能
                F8    恢复运行
                F10    步过，遇到自定义函数也当成一个语句执行，而不会进入函数内部
                F11    步入，遇到自定义函数就跟入到函数内部
                Shift + F11    步出，跳出当前自定义函数
                点击“推荐”按钮进行调试的时候会发现，不管我们是按的F10进行调试还是按F11进行逐步调试，都没法进行$.ajax函数内部，即使我们在函数内部设置了断点也没有办法进入，这里按F8才是真正起效果的，
                debugger    -----自己写的代码，你执行的时候想让它在某一处停下来，只要写上的debugger就好了