浏览器调试

一、.普通的原生js应用

  F2->Source->{

       方法一， 左侧Page选项卡逐级开启需要调试的文件->点击行号-<再次访问

        方法二，在代码中对对应文件打上console.log->在Console中点击进入文件行->点击行号-<再次访问

        方法三，在Source tab中 Ctrl + p->输入文件名搜索->进入文件行->点击行号-<再次访问

}

二、Webpack类应用

      1.插件法：

              Vue类 - ①下载Vue.js develop tools，

                            ②Vue类应用打包使用develop模式访问或者在开发环境中 F2   后在vue tab下 查看编辑数据源           

               React类-①下载React Developer Tools

                              ②同理build使用develop模式访问或者开发环境 打开F2 ，此时  带react图标的Components或激活，进入对应的组件浏览数据源

      2.断点调试法

               ① React和Vue应用尽量在开发环境使用此调试方法

               ② 在代码中对应行打上日志便于寻找

               ③ 进入对应代码行在行号点击添加断点         

                附加： 当然也可以在Source tab下自行选择文件按照普通应用方式打断点后再次访问即可         

三、积极使用Console 作为代码编辑器

       1. 在无嵌套的页面开启Console方便调试本页以及DOM操作等，同时代码片段会对对本页生效

        2.对于iframe嵌套的页面，可以在Console的下拉中选择对应iframe，或者Elements中单独打开iframe后采用①中的方式

 四、样式style的 调试

         ① F12开启控制台后Elements浏览模式下，右侧分栏会显示元素对应样式列表，出去划线的均为计算生效的样式，请多使用调色板  及 盒子模型     

          ② 当然Elements的右侧分栏也可以 查看当前元素绑定的事件 快捷进入调试