BOS新Web平台培训_案例篇_4跟踪调试.pptxVIP

金蝶EAS8.0BOS Web平台应用开发培训 跟踪调试篇BOS WEB平台系统部2015.3提纲11调试基础介绍 JS加载模式 页面运行模式2调试技巧 Chrome调试 IE调试 Fiddler应用 常用JS调试入口 案例演示调试基础介绍产品模式默认以产品模式运行每个界面，产品模式运行时，每个界面的JS都会被打包并且混淆，并将多个JS压缩到一个链接中。Debug模式Debug模式时，JS的加载是单个加载的，如果想调试某个页面，可以在URL中加上debug=true这样所有页面都以DEBUG模式加载JS。静态化静态化运行时，页面的HTML直接从服务器上加载，前台进行界面初始化，要想某个页面非静态化运行，可以在url中增加参数renderModel=client。非静态化非静态化运行时，界面的HTML根据元数据从前台渲染出来。JS加载模式页面运行模式调试技巧（Chrome调试）JS断点设置断点类型分三种：默认遇到异常不中断；遇到所有异常都会中断；仅在出现未捕获的异常时才中断。断点条件，在断点位置的右键菜单中选择“Eidt Breakpoint…”可以设置触发断点的条件，即写一个表达式，表达式为true时触发断点。 调试技巧开始调试：鼠标右键审查元素或F12；按钮功能： 调出控制台； 切换开发环境是全屏还是嵌入； 清空当前显示； 将压缩的JS文件格式化； 定位页面元素；Chrome调试调试技巧（Chrome调试）Elements Panel查看当前选中元素的嵌套路径查看或编辑当前选中元素的样式查看选中元素的盒模型监听事件常用调试面板调试技巧（Chrome调试）Network Panel查看站点在一个动作时都加载了哪些文件查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间点击查看该文件的具体情况常用调试面板调试技巧（Chrome调试）Source Panel查看当前站点的CSS、JS文件加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值常用调试面板调试技巧（Chrome调试）Console Panel控制台输出值打印查看或更改代码调试过程的值常用调试面板调试技巧（IE调试）JS断点设置断点条件，在断点位置的右键菜单中选择“条件”可以设置触发断点的条件，即写一个表达式，表达式为true时触发断点。 调试技巧开始调试：按F12；选择浏览器的版本：选择浏览器模式和文档模式；按钮功能： 切换开发环境是全屏还是嵌入； 将压缩的JS文件格式化； 定位页面元素；IE调试调试技巧（IE调试）HTML 面板查看当前选中元素的嵌套路径查看或编辑当前选中元素的样式查看选中元素的布局常用调试面板调试技巧（IE调试）脚本面板查看当前站点的CSS、JS文件加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值常用调试面板调试技巧（IE调试）网络面板点击开始捕捉，可以查看站点在一个动作时都加载了哪些文件查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间点击转到详细视图，查看该文件的具体情况常用调试面板调试技巧（Fiddler）功能Fiddler临时更改服务器静态资源，包括JS或CSS文件。使用步骤打开Fiddler，清空浏览器缓存，刷新页面；Fiddler临时更改服务器静态资源调试技巧（Fiddler）使用步骤2. 在Fiddler的左侧找到指定的文件，在右侧AutoResponder面版中点击按钮Add Rule，将左侧的文件添加到右侧中；Fiddler临时更改服务器静态资源调试技巧（Fiddler）使用步骤3. 在Fiddler的右侧选中刚添加的文件，在右侧的底部Rule Editor第二个下拉框中选中find a file…指定本地的文件；Fiddler临时更改服务器静态资源调试技巧（Fiddler）使用步骤4. 如此反复添加一个或多个文件；5. 在Fiddler右侧AutoResponder面版中，选中复选框Enable automatic responses 和 Unmatched requests passthrough；6. 点击右下角的save,刷新页面即可Fiddler临时更改服务器静态资源调试技巧（常用JS调试入口）（注：以下介绍以Chrome调试为例）初始化事件initalizeEvent常用JS调试入口调试技巧（常用JS调试入口）初始化页面initalizeAction常用JS调试入口调试技巧（常用JS调试入口）界面渲染事件_pageOnRenderEventHandler常用JS调试入口调试技巧（常用JS调试入口）构建组件_buildComponent常用JS调试入口调试技巧（常用JS调试入口）控件的初始化方法表格初始化方法initGrid常用JS调试入口调试技巧（常用JS调试入口）控件的初始化方法