-
按“F12”键。
-
按“Ctrl + Shift +I”组合键。
-
右击页面的任意位置,选择快捷菜单中的“检查”命令。
-
单击 Chrome浏览器右上角的自定义图标,展开菜单,选择“更多工具”→“开发者工具”命令,如下图所示。
打开开发者工具后,会看到有许多标签的面板,如下图所示。
上图中,比较常用的是Elements、Console、Sources和Network这4个面板,接下来一一为读者介绍其使用方式。
1、Elements面板
Elements面板即元素面板,使用该面板可以直接操作DOM元素和样式,包括查看元素属性或者修改元素属性、修改样式等,非常方便开发者调试HTML结构和CSS样式,页面效果如图所示。
在上图,选中 Elements面板,左侧栏会显示页面的 DOM结构,右侧栏显示对应的选中节点样式以及标准盒模型,可以方便查看页面任意内容的宽、高等属性。
在Elements面板中无论修改HTML结构还是CSS代码,修改以后的效果都会实时同步到页面中。例如,修改当前选中的标签的 width属性为500 px,页面中的div宽度就会发生变化,同时右侧栏中该元素的盒模型值也会更新。
2. Console面板
Console面板即控制台面板,使用该面板不仅可以输出开发过程中的日志信息,而且可以直接编写代码,作为与JavaScript进行交互的 Shell命令行,页面效果如下图所示。
在Console面板可直接定义函数并调用。另外,除了在Console面板中直接定义代码,使用JavaScript中注入的Console对象中的常用方法,也可以快速显示页面中元素的信息。
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法