Chrome 开发者工具介绍

2024-04-20 20:15:03

作为一个程序员我认为我们一定要对自己使用的工具很熟悉，这样才能在工作当中游刃有余，今天我要给大家讲的不是我们常常使用的编辑器，而是我们的Chrome浏览器控制台。

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

打开谷歌浏览器控制台

在Chrome菜单中选择更多工具 > 开发者工具
在页面元素上右键点击，选择 “检查”
使用快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
使用另外快捷键 F12（Windows）或 fn+F12（Mac）

了解面板

和百分比圈在一起的是手机的状态。一共四个选项：

在线【online】

中端手机【mid-tier mobile】

低端手机【low-end mobile】

离线【offline】

元素面板【Elements】

使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.

控制台面板【Console】

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

关于更多console的内容请看：你不知道的console，控制台也能玩出花样

源代码面板【Sources】

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

网络面板【Network】

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

性能面板【Performance】

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

内存面板【Memory】

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。 Use the Profiles panel if you need more information than the Timeline provide, for instance to track down memory leaks.

应用面板【Application】

使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

安全面板【Security】

使用安全面板调试混合内容问题，证书问题等等。

参考文献：https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn&authuser=2

Chrome 开发者工具介绍相关推荐

使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
程序员的你是否熟练掌握Chrome开发者工具？
写在前面再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈^_^ 回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发 ...
chrome开发者工具_如何使用Chrome开发者工具查找性能瓶颈
chrome开发者工具介绍 (Introduction) As one advances through a software development career, concerns beyond ...
介绍一个Material设计风格的Chrome开发者工具增强扩展
看腻了千篇一律的Chrome开发者工具外观?最近我试用了一款Chrome扩展,可以将Chrome开发者工具外观替换成Material设计风格,用了一段时间觉得不错,这里介绍给大家. Chrome扩展名 ...
Chrome浏览器开发者工具介绍；（包括，Network面板介绍，XHR等等）
为什么写了这篇博客: (1)原因一在[OA系统二十三:请假审批四]这篇博客中,加载[请假审批这个内嵌页面]后,这个内嵌页面中需要显示[待审批请假数据]的列表数据,而这些列表数据,是通过ajax请求从 ...
chrome开发者工具-timeline的详细介绍
这篇文章主要记录chrome开发者工具-timeline的相关资料,为排查工作中页面请求响应返回数据慢的问题,对自己的学习/工作具有一定的参考价值. 一.概述用户都希望他们访问的web应用是可交互且 ...
chrome开发者工具功能拾遗：Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板面板上包含了Elements面板.Console面板.Sources面板. ...
SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

最新文章

热门文章