报表宏开发基础Chrome调试工具

Chrome调试工具,工欲善其事，必先利其器。在进行开发前，应当了解一些必要的开发工具，以加快开发效率。Chrome调试工具功能强大，本课程并未一一介绍，只是选取了在进行Smartbi报表宏开发，扩展包开发，以及定位问题的过程中，经常使用到的功能。,培训目的,目录,CONTENTS,常用标签简介,01,Chrome调试工具有多个标签按钮，仅介绍常用的元素定位，设备切换，Elements，Console及Sources。,箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态使用场景：主要是用来在页面上定位元素，定位元素以后，就会自动切换到Elements标签中。主要用于：1.寻找元素标识或属性信息，用以在代码中准确获取元素，或取得有用信息；2.查看元素结构，了解其父子元素，比如在进行页面元素调整时，需要确定当前位置及目标位置；3.查看元素的样式，用以复制该样式；4.调整元素样式，样式修改实时生效。,元素定位,Elements用来查看，修改页面上的元素，包括DOM标签。以及css样式的查看，修改，还有相关盒模型的图形信息，还可查看当前元素及其父祖元素上绑定的事件。如左上图，当选中某个元素时，右侧的css样式对应的会展示出此元素的样式信息，此时可以在右侧进行修改，修改即可在页面上生效。,在Elements中查看元素,移动端与PC端的JS代码存在不兼容的问题，在PC端可以正常运行的代码，在移动可能直接就报错了，并且移动端也分为android、ios，甚至到具体的移动设备型号，其JS代码同样存在兼容问题。点击设备图标，可以在移动端和PC端之间切换，也可以选择具体的移动设备，同时支持选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大。例：涉及到移动端改造，为方便调试均需使用此功能模拟移动端设备。如：隐藏部分底部工具栏；在移动端调试报表宏等。,设备模拟,Console控制台：用于显示网页的报错信息和提示信息，也可直接输入JavaScript代码。当前出现错误信息时，有时可以直接定位到错误位置，然后直接添加断点进行调试。console对象：通常使用console对象打印日志信息，方便调试代码等。console常用方法：提示信息：(obj)，警告提示：console.warn(obj)，报错提示：console.error(obj)，基本输出：console.log(obj)。,在Console控制台中查看信息,执行上图示例代码，在Console中查看相关信息。通常还可定位到信息产生的具体代码。如出现报错信息时，可定位到出错代码，即时添加断点进行调试。,Sources：在调试时会进入此页面，可以观察源码，监控对象信息，查看方法调用栈信息，添加事件断点等。,在Sources中调试代码,常用调试技巧,02,报介绍三种经常使用的调试方法，包括：debugger，事件断点，源码中设置断点。,在进行代码编写时，选在功能关键步骤处添加debugger，方便进行调试。程序运行时，会停留在debugger处，然后即可手动执行代码。手动执行代码：1.进入下一个断点（F8）：继续自动运行当前代码，进入下一个断点时停留。2.单步调试（F10）：单步执行代码，不进入方法体。3.进入方法体（F11）：在对象调用方法时，会进入所调用方法。4.退出方法体（Shift+F11）：不继续手动执行当前方法，快速回到上一个方法继续调试。,常用调试技巧-添加debugger,在需要查找事件方法，或者无源码情况下调试功能查找问题时，添加debugger的方式就会比较困难。此时可以采用事件断点的方式。例：查找灵活分析”刷新”方法,常用调试技巧-事件断点,在调试过程中，通过单步执行代码，会发现一些其他比较关键的步骤或方法，为提高调试效率，此时可直接单击