共计 7 篇文章

使用 chrome-devtools Console 面板

Console 面板,又称控制台,用以打印应用输出信息和输入需要被执行的代码。 下面来熟悉下这个面板,将介绍一些 Console Api 和面板常用的功能。首先,它长这个样子: 光标处可以输入需执行的js代码,右侧显示的是信息打印自哪个文件哪一行。 Console Api console.assert(expression,object) 当 ...

使用 chrome-devtools Elements 面板

Elements 面板主要展示当前页面的组织结构,在如今的应用程序中,HTML页面初始化时加载的不一定就是之后看到的DOM树,有一个页面结构的实时调试工具可以很好的帮助开发者调试开发和调试bug,下面开始认识下Elements面板。 首先,看下这个面板长什么样。 解释下各编号所指的内容(一些内容少的直接图片内文字描述,内容多的图内编号+图外文字描述): #1 用于在页面上选择一个元素,并且查看该元素 #2 模拟设备之间的切换,主要是pc/移动端(包括手机, ...

使用 chrome-devtools Sources 面板

Sources面板主要用于查看 web 应用的资源列表和查看及调试js代码。 首先,看一下面板长什么样,接下来了解一下这些功能都如何使用。 左侧展示当前页面内所引用资源的列表;中间区域展示的资源内容以及一些断点/修改操作;右侧是主要的操作内容,比如监听、当前函数的调用堆栈、事件断点等... 文件列表 默认展示的是当前页面的文件列表,总共有如下功能: 当前页面的文件列表 导入代码文件夹作为文件列表 导入覆盖当前页面文件的文件列表 内容代码( ...

使用 chrome-devtools Network 面板

每个文件的加载、请求的发送都是一次网络交互,在Network面板中能够看到所需资源文件是否被加载?请求的接口到底返回了没有?能够知道哪个资源没载完从而导致整个web的呈现? Netwrok面板中会记录应用程序的每一次网络交互信息,每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等... 面板的资源数据依赖的是 javascript 的资源计时 api : performance,对于每一个资源的加载都提供详细的同步数据。比如,明确列出当一个http开始请求的时间及最后字节接收完的时间以及详细过程。我们也可以通过 window. ...

使用 chrome-devtools Performance 面板

这玩意以前叫Timeline... 不过功能是一样的,小部分细节做了规范整理。 之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化方面,它的作用就是记录与分析应用程序运行过程中所产生的活动。 Performance 首先,看下这个面板长什么样,再依次介绍面板有的功能... 设置(最右上角的) 因为忘记标明它了,就先介绍吧。设置项有: ...