参考：

• 参考：MDN 调试HTML
• 参考：什么是浏览器开发者工具？
• 参考：检查和编辑页面与样式
• 工具参考：标记验证服务
• 工具参考：直接输入验证（直接输入HTML源码进行在线检查）
• 参考：谷歌浏览器调试工具的13个Tips
• 参考：Chrome调试工具进阶技巧
• 浏览器参考：Chrome
• 浏览器参考：Chrome (DEV)
• 浏览器参考：Chrome (Canary)

1、快捷操作

1. F12进入调试界面。
2. 常用鼠标右击→检查，找到相应组件对应的HTML语言位置及其相应的属性情况。
3. 调试界面console中，快捷键：ctrl+L为清屏操作。
4. 点击调试界面左上角的箭头，可以让鼠标定位找到网页中各个组件在HTML源代码中的位置（或者鼠标右击，选择检查）。
5. 使用左上角箭头找到需求组件在HTML源代码中的位置后，在console中输入$0即代表所选中的组件。
6. 在console中输入$("#id")，然后回车，可以看到当前组件的所有属性，以及展开在proto找到相应属性的配置方法。
7. 会出现较乱的Source源码，可以点击左下角的"{}"，即可展开为方便查看的形式。

2、调试方法

1. F12进入调试界面，在Elements窗口中，键盘Ctrl+Shift+F，进行查找。或者在控制台Network中，Search/Filter中搜索JS文件名称，找到该JS文件，并进入右击Open in Source panel进入源码调试。

2. 预览页面中，查看页面（Page）是否有调用服务（Service）成功的方式：F12后，在Network中查看调用的服务，以及服务中传入的参数（报表详细信息，可以看到页面调用的服务，以及传入的参数信息）（如有报错，在调试窗口的右上角可以看到有红色×的 图标，点击红色×进行调试）。

3. console.log("Hello, world!");或者console.error("Hello, world!");调试，在浏览器的F12的Console中刷新即可看到打印的调试信息console.log("Hello, world!");需要在F12的Console中勾选info选项）。

   console.log("Hello, world!") // 或者`console.error("Hello, world!");`调试，在浏览器的F12的Console中刷新即可看到打印的调试信息`console.log("Hello, world!");`需要在F12的Console中勾选info选项）。
   console.log("Hello, world!"); // 用于输出普通信息
   console.info("Hello, world!"); // 用于输出提示性信息
   console.error("Hello, world!"); // 用于输出错误信息
   console.warn("Hello, world!"); // 用于输出警示信息
   console.debug("Hello, world!"); // 用于输出调试信息console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
   console.log("%年%月%日", 2011, 3, 26); 
   console.log("圆周率是：%f", 3.1415926); 
   

4. F12 控制台引入jQuery库

   var importJs = document.createElement(‘script‘) // 在页面新建一个script标签
   importJs.setAttribute("type", "text/javascript") // 给script标签增加type属性
   importJs.setAttribute("src", ‘http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js‘) // 给script标签增加src属性， url地址为cdn公共库里的
   document.getElementsByTagName("head")[0].appendChild(importJs) // 把importJs标签添加在页面
   

Web开发（F12调试）

原文：https://www.cnblogs.com/zyjhandsome/p/13688405.html