Html调试

适用场景：
查看动态Html代码；并可临时修改html查看效果

商用系统中的Html分为两种：① 写在.html文件中的静态网页；② 通过js动态更新的动态网页。静态网页直接在.html文件中查看即可，动态网页需要在运行时才能看到实际代码，这就需要使用Html调试模式来查看。

一、选取界面元素

1、运行架构源码示例平台
2、打开Chrome浏览器，输入： http://localhost:8080/base-web ，跳转登录页面，输入用户密码及验证码后，登录到系统首页，点击左侧的“用户管理列表”菜单。
3、按下F12，调出Chrome的开发者工具。开发者工具的位置可以切换，图示的是在界面下方。

chrome开发者工具最常用的四个功能模块：

• Elements：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。大大方便了开发者调试页面，这真是十分友好的。
• console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。
• Sources：主要用来调试js和查看源代码。
• Network：从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。

其它几个模块功能：

• Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
• Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
• Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security:判断当前网页是否安全。
• Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
  4、鼠标点击开发者工具界面的选取箭头（最左侧的那个箭头），可以在界面中点击选取想查看的任意元素。

二、查看动态Html代码

1、按步骤一操作。我们把开发者工具界面调成下方展示。
2、鼠标点击开发者工具界面的选取箭头，然后点击上方界面的列表头部（如下图所示），这时下方的开发者工具会自动切换到Elements模块，并把代码定位到列表头部对应的Html代码。

细心的读者对照html源码会发现，在之后，多出来了一些列表的动态html代码。

知道了列表的实际html代码后，读者就可以根据业务需要进行操作控制了。

三、临时修改html查看效果

1、按步骤一操作。
2、鼠标点击开发者工具界面的选取箭头，然后在上方界面点击“新增”按钮，这时下方的界面会自动切换到Elements模块并定位到“新增”按钮的html代码。在定位的代码行上点击右键->Edit as HTML，会出现如下图所示的编辑区：

删掉class后面的ext-btn-radius，变成class="layui-btn"，然后在编辑区外点击一下鼠标。这时，读者会发现上方的“新增”按钮的圆角效果没了，变成方角按钮的。

3、按照上述的方式，读者可以根据业务需要，临时调整html代码，查看实际效果；待得到想要的效果后，再把改动更新到实际的代码中。如此可以节省来回修改代码运行查看效果的时间，提升开发效率。

温馨提醒

如果发现修改了源码，但是页面没生效，请切换到Network模块，并勾选上Disable cache，然后刷新页面。