开封市建设教育协会网站,vue反向代理天地图地址,网站优化网站建设,wordpress主题沐风1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析。描述了每个功能点能实现的功能、应用场景和详细操作。 2 Elements 2.1 功能 检查和实时更新页面的HTML与CSS 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。在 Styles 窗格中查看和更改应用到任何选…1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析。描述了每个功能点能实现的功能、应用场景和详细操作。 2  Elements 2.1  功能 检查和实时更新页面的HTML与CSS 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。在 Computed 窗格中查看和修改选定元素的框模型。 2.2  应用场景 开发过程中编辑DOM节点调试DOM节点的样式调试过程中检查和编辑框模型参数 2.3  操作 编辑DOM节点　　打开控制台选定需要修改的DOM节点双击选定元素然后进行修改即可。 编辑样式　　打开控制台选定需要修改的DOM节点在 Styles 窗格中实时编辑样式属性名称和 值。所有样式均可修改除了灰色部分与 User Agent 样式表一样。 要编辑名称或值请点击它进行更改然后按 Tab 或 Enter 保存更改。默认情况下您的 CSS 修改不是永久的重新加载页面时更改会丢失。　 检查和编辑框模型参数使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修 改只需点击它们即可。 3  Console 3.1  功能 打印日志执行测试代码测量和统计执行异常和报错处理 3.2  应用场景 输出页面代码中需要输出的日志可以在浏览器控制台测试代码检测代码的执行效率输出代码中存在的异常和报错信息 3.3  操作 3.3.1  常用API console.log() 输出信息console.info() 输出信息console.warn() 输出警告信息console.error() 输出错误信息console.group() 输出一组信息需要搭配console.groupEnd() 使用console.groupEnd() 输出一组信息需要搭配console.gruop() 使用console.time() 输出代码执行的时间需要搭配console.timeEnd() 使用console.timeEnd() 输出代码执行的时间需要搭配console.time() 使用 4  Network 4.1  功能 测试网络性能分析网络请求 4.2  应用场景 4.3  操作  4.3.1  记录网络请求 默认情况下只要Chrome DevTools在开启状态DevTools会记录所有的网络请求记录都是在Network面板展示的。 4.3.2  停止记录网络请求 点击Stop recording network log红色图标当它变为灰色时表示DevTools不在记录请求快捷键在Network面板下CommandE(Mac)或者CtrlE(Windows,Linux) 4.3.3  清除网络请求 4.3.4   跨页面加载时保留网络请求记录 当页面重载或者页面跳转时默认情况下Network面板下的网络请求记录表也是刷新的。如果想保留之前页面的网络请求数据可以勾选Preserve log。 常用的一个应用场景登录/注册时会调用登录/注册API开发者想查看这个接口返回的情况但是登录/注册成功后一般会跳转到新的页面导致了Network面板的请求记录被刷新从而看不到登录/注册接口返回的情况。此时勾选上Preserve log无论跳转到那个页面都能在Network网络请求记录表中查看到之前接口返回的情况。 4.3.5   页面加载时捕获屏幕截图 捕获屏幕截图可以分析在页面加载的过程中用户在不同的时间段内看到的网页是什么样子的。点击Capture screenshots图标开启捕获功能当图标变为蓝色表示已开启重载页面即可看到不同时间的屏幕截图。 捕获屏幕截图之后可以进行以下操作 鼠标悬浮在一张图片上时该图片四周会出现一个黄色的边框同时在Overview和Waterfall窗口里面也分别有一条黄色的竖线这条黄色的竖线表示这张图片的捕获时间点击某一张图片可以过滤掉在这张图片捕获之后发生的所有请求双击图片可以放大该图片 4.3.6   禁用浏览器缓存 在http请求的过程中有些资源在页面初次加载之后会被缓存到浏览器中也就是那些状态码为304的资源。为了尽可能准确地模拟用户第一次加载我们网页时的情景需要禁用浏览器缓存这样每一个请求都是从服务端传送过来的较为准确地反应出网页初次加载的实际情况 4.3.7   模拟网速条件 在Network Throttling下拉框中可以选择不同的网络条件进行模拟如2G、3G、4G、WiFi等。 除了选中已有的网络选项也可以自定义网速相关条件打开Network Throttling菜单选择Custom Add。 另一种模拟情况较为特殊就是无网络。利用service workersPWA(Progressive Web Apps)在无网络的情况下依然可以使用。模拟这种无网络环境直接勾选Offline即可。 提示开发者会看到Network左侧有个警告图标这个图标就是提示开发者当前处于模拟网络条件下。 4.3.8   手动清除浏览器缓存、cookies 在网络请求记录表里面右键选择Clear Browser Cache或Clear Browser Cookies。 4.3.9   根据属性过滤 点击漏斗图标使其颜色变为蓝色然后就可以对网络请求表中的数据进行进一步的过滤。在输入框中可以输入一些字符串、域、大小、状态码、媒体类型等等。 4.3.10   根据类型过滤 这里是可以多选的按住Command(Mac)键或Ctrl(Windows,Linux)键然后单击不同的类型如点击JS和Img则过滤出js文件和图片。显然All不与其他类型共存选择All的时候不能再选某一个具体类型。 4.3.11   查看请求记录 Name文件的名字或者资源的标识符StatusHTTP状态码Type请求资源的MIME类型Initiator以下对象或处理可以发起一个请求ParseChrome的HTML解析器RedirectHTTP重定向Scriptjs函数Other一些别的处理或操作比如通过链接导航到一个页面或者是在浏览器的地址栏输入一个地址然后回车Size响应头大小响应体大小Time总的持续时间从发起请求到资源下载完成Waterfall每一个请求活动的不同阶段的可视化展示 4.3.12   Headers查看请求头、响应头以及请求参数 在列Name下点击某个请求的URL可以查看到请求、响应的详细内容。 默认情况下请求、响应头是按照字母表顺序显示的http头部的名字如果想按照实际接收的顺序显示点击上图中的view source反之点击上图中的view parsed。 在Headers选项卡中也可查看请求的参数下图橙色方框部分。也有view source和view parsed另外还有参数编码格式view URL encoded和解码格式view decoded。 Preview查看响应体的预览 Response查看响应体 Cookies查看cookies 4.3.13   Timing查看请求在各个阶段对应的时间 Queueing浏览器会在以下情况对请求进行排队有更高优先级的请求在这个域下已经有6个TCP连接了达到Chrome最大限制数量。此条规则仅适用 在HTTP/1.0和HTTP/1.1 StalledQueueing中的任何一个因素发生都会导致该请求被拖延Proxy negotiation浏览器与代理服务器协商消耗的时间DNS Lookup浏览器对请求的IP地址进行DNS查找所消耗的时间Initial conncection发起连接所消耗的时间Request sent请求发送消耗的时间Waiting (TTFB)浏览器等待响应的时间TTFB表示 Time To First ByteContent Download资源下载所消耗的时间 4.3.14   查看请求的发起对象和依赖对象 按住Shift键然后鼠标悬浮在某个请求上该请求的发起对象由绿色标志该请求的依赖对象由红色标志。 4.3.15   查看加载事件 DevTools在多个地方显示了DOMContentLoaded和load事件发生时对应的时间。DOMContentLoaded事件对应紫色的线load事件对应红色的线 4.3.16 查看请求的总数量和总大小 这里的数据表示DevTools打开以后被记录的请求所对应的数据如果有些请求在DevTools打开之前已经发生了这些请求的数据是不计算在这里面的。 5  Sources 5.1  功能 页面资源查找实现代码编辑同步到本地功能调试javascript 5.2  应用场景 查找页面所请求的资源列表开发或调试过程中可以实现在浏览器上修改代码自动同步到本地文件开发过程中可以使用通过console.log()来查找或修正代码中的错误但是使用“断点”的方式可以大大提升速度也更有效。 5.3  操作 实时编辑代码功能 该功能可以一边修改并保存到本地文件中在sources工作组中右键点击 ” Add folder to workspace ” 将本地文件夹添加到该工作组中在添加进来的文件夹中打开你想要编辑的文件或者在文件上右键点击 ” Map to File System Resource… “,也可以 “Ctrlo” 打开搜索面板再打开文件。 编辑之后按Ctrls保存在本地文件中也会被修改。 调试javascript断点 断点让您可以暂停执行中的代码并对暂停时刻的所有变量值进行检查。 检查点击 Event Listener Breakpoints 将该部分展开。选中click复选框、当选中click复选框时就是在所有的click事件上设置了一个基于事件的断点。当点击任何DOM节点并且该节点具有click处理程序时Devtools会自动暂停在该节点click处理程序的第一行。 注这不过是 DevTools 提供的众多断点类型中的一种。应使用的断点类型取决于您要调试的问题类型。 通过点击 可以一步一步调试代码。 单步调试代码 跳过调试代码 脚本继续执行直至到达您设置了断点的代码行。 6  Application 6.1  功能 记录网站加载的所有资源信息包括存储数据Local Storage、Session Storage、IndexedDB、Web SQL、Cookies,缓存数据、字体、图片、脚本、样式表等。 6.2  应用场景 查看页面的local Storage。查看页面的Session Storage查看和删除页面的cookie查看页面的资源清除所有存储、数据库、缓存和服务工作线程。 6.3  操作 6.3.1   查看页面的local Storage。 双击键或值可以修改相应的值。双击空白单元格可以添加新条目。点击对应的条目 然后按 Delete 按钮可以删除该该条目。 只需点击一次按钮即可从 Clear storage 窗格擦除所有本地存储数据。如果您使用一种可以创建、删除或修改条目的方式与页面交互则不会看到这些更改实时更新。 点击 refresh 按钮可以查看您的更改。 6.3.2   查看页面的Session Storage。 Session Storage 窗格与 Local Storage 窗格的工作方式相同。 参阅上面的Local Storage部分 6.3.3   查看和删除页面的cookie 查看与 Cookie 有关的详细信息例如名称、值、网域和大小等等。删除单个 Cookie、选定网域的 Cookie 或所有网域的全部 Cookie。　　使用 Cookies 窗格可以查看和删除 Cookie。您无法修改 Cookie 值。  为每个 Cookie 提供了以下字段 可以通过多种方式删除 Cookie 选择 Cookie 并按 Delete 按钮可以删除相应 Cookie。按 Clear 按钮可以删除指定组的所有 Cookie。 6.3.4   查看页面的资源 使用 Application 面板的 Frames 窗格可以按框架组织页面的资源。 6.3.5   清除所有存储、数据库、缓存和服务工作线程。 有时您只需要擦除给定源的所有数据。利用 Application 面板上的 Clear Storage 窗格您可以选择性地注销服务工作线程、存储和缓存。要清除数据只需启用您想要擦除的组件旁的复选框然后点击 Clear site data。操作将清除 Clear storage 标签下所列源的所有数据。 7  Security 7.1  功能 调试页面安全问题确保已在网站上恰当的实现HTTPS 7.2  应用场景 使用 Security Overview 可以立即查看当前页面是否安全。检查各个源以查看连接和证书详情安全源或找出具体哪些请求未受保护非安全源。 7.3  操作 7.3.1   使用 Security Overview 可以立即查看当前页面是否安全。 安全页面会通过消息 This page is secure (valid HTTPS).  点击 View certificate 查看主源的服务器证书。 非安全页面会通过消息 This page is not secure. Security 面板可以区分两种非安全页面。 如果请求的页面通过 HTTP 提供则主源会被标记为不安全。如下图 如果请求的页面通过 HTTPS 检索但页面会继续使用 HTTP 检索其他源的内容然后页面仍然会被标记为不安全。这称为混合内容页面。 混合内容页面仅受部分保护因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击。如下图 7.3.2   检查源 使用左侧面板可以检查各个安全或非安全源。 点击安全源查看该源的连接和证书详情。 如果您点击非安全源Security 面板会提供 Network 面板过滤视图的链接。 8  Audits 8.1  功能 当前网页进行网络利用情况、网页性能方面的诊断并给出一些优化建议。比如列出所有没有用到的CSS文件等。 8.2  应用场景 根据诊断的建议对网页实施优化 8.3  操作 选中Network Utilization、Web Page Performance点击Run按钮将会对当前页面进行网络利用率和页面的性能优化作出诊断并给出相应的优化建议。 原文地址http://www.cnblogs.com/hellotyc/p/7111518.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注