Web开发（调试方法 F12）

2023-01-28 08:06:18

参考：

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

目录：

1、相关快捷操作

1、相关快捷操作

F12进入调试界面。
常用鼠标右击→检查，找到相应组件对应的HTML语言位置及其相应的属性情况。
调试界面console中，快捷键：ctrl+L为清屏操作。
点击调试界面左上角的箭头，可以让鼠标定位找到网页中各个组件在HTML源代码中的位置（或者鼠标右击，选择检查）。
使用左上角箭头找到需求组件在HTML源代码中的位置后，在console中输入$0即代表所选中的组件。
在console中输入$("#id")，然后回车，可以看到当前组件的所有属性，以及展开在__proto__找到相应属性的配置方法。
会出现较乱的Source源码，可以点击左下角的"{}"，即可展开为方便查看的形式：
F12进入调试界面，在Elements窗口中，键盘Ctrl+Shift+F，进行查找。或者在控制台Network中，Search/Filter中搜索JS文件名称，找到该JS文件，并进入右击Open in Source panel进入源码调试。
预览页面中，查看页面（Page）是否有调用服务（Service）成功的方式：F12后，在Network中查看调用的服务，以及服务中传入的参数（报表详细信息，可以看到页面调用的服务，以及传入的参数信息）（如有报错，在调试窗口的右上角可以看到有红色×的图标，点击红色×进行调试）。
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);

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标签添加在页面

码农公寓

1、相关快捷操作

相关文章