Chrome开发者工具使用教程

前端开发中,经常需要调试代码,所以各种调试工具及浏览器控制台的使用会对开发起到很大的作用。下面对目前很受喜欢的Chrome开发者工具进行介绍。Chrome开发者工具是一套内嵌到Chrome浏览器的Web开发工具和调试工具,只要安装了Chrome 浏览器,就可以使用。

在Chrome浏览器中,开发者工具的打开方式主要有以下几种。

·按“F12”键。

·按“Ctrl + Shift +I”组合键。

·右击页面的任意位置,选择快捷菜单中的“检查”命令。

·单击 Chrome浏览器右上角的自定义图标,展开菜单,选择“更多工具”→“开发者工具”命令,如下图所示。

打开开发者工具后,会看到有许多标签的面板,如下图所示。

Chrome开发者工具使用教程

上图中,比较常用的是Elements、Console、Sources和Network这4个面板,接下来一一为读者介绍其使用方式。

1、Elements面板

Elements面板即元素面板,使用该面板可以直接操作DOM元素和样式,包括查看元素属性或者修改元素属性、修改样式等,非常方便开发者调试HTML结构和CSS样式,页面效果如图所示。

Chrome开发者工具使用教程

在上图,选中 Elements面板,左侧栏会显示页面的 DOM结构,右侧栏显示对应的选中节点样式以及标准盒模型,可以方便查看页面任意内容的宽、高等属性。

在Elements面板中无论修改HTML结构还是CSS代码,修改以后的效果都会实时同步到页面中。例如,修改当前选中的标签的 width属性为500 px,页面中的div宽度就会发生变化,同时右侧栏中该元素的盒模型值也会更新。

2. Console面板

Console面板即控制台面板,使用该面板不仅可以输出开发过程中的日志信息,而且可以直接编写代码,作为与JavaScript进行交互的 Shell命令行,页面效果如下图所示。

Chrome开发者工具使用教程

在Console面板可直接定义函数并调用。另外,除了在Console面板中直接定义代码,使用JavaScript中注入的Console对象中的常用方法,也可以快速显示页面中元素的信息。

值得一提的是,在Console面板中编写代码时,按“Shif+Enter”组合键可以实现代码的换行。

3. Sources面板

Sources面板即源代码面板,如果在工作区打开本地文件,可以实时编辑代码,并支持断点调试,如下图所示。

在下图中,打开JavaScript文件,单击代码前面的编号计可以设詈断占进行调试,例如单击代码序号137和141,设置的所有断点都会显示在右侧的Breaknoints断点区。

然后重新刷新页面,即可看到设置断点位置的代码运行情况。

Chrome开发者工具使用教程

4.Network面板

Network面板即网络面板,用于记录页面上网络请求的详情信息,根据它可进行网络性能优化,打开扩展的Network面板,查看所有请求的运行状况,页面效果如图所示。

Chrome开发者工具使用教程

Chrome开发者工具使用教程

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/262996.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
黑马程序员黑马程序员订阅用户
上一篇 2023年5月13日 12:48
下一篇 2023年5月13日 12:48

相关推荐

  • 什么是关键词排名查询工具?

    说起关键词排名工具,想必大部分人都不是很了解,它可以查询网站关键词在搜索引擎上的排名,一般做网站优化的人使用的比较多。如今有很多公司都开发出了关键词排名查询工具,那么,关键词排名查询工具哪个好用呢? …

    2022年5月23日
    0679
  • 今日分享什么是淘金币流量保障工具。

    淘金币已相继推出店铺粉丝运营、多类型推广等工具策略升级,同时随着直播越来越受商家的重视;在淘宝上面,大家应该也都知道,淘金币是一个重要的店铺营销工具,不少卖家都设置了淘金币抵扣活动,但是大家是否了解淘…

    2023年10月21日
    01
  • 我来分享很多人做网站seo优化都会借助工具。

    很多人做网站seo优化都会借助工具,这样才能够加强优化的效果,其中seo工具是关键词提取的重要工具,他可以大量的识别关键词,并且智能的提出长尾词会,所提出的关键词更加方便于百度seo优化搜索引擎。只有这样才能…

    2023年3月11日
    02
  • 教你有哪些工具是做seo优化必要用的。

    关于跨境电商卖家来说,跨境电商战场早已是流量的比拼,站内流量用完,站外相似adwords的广告本钱又是水涨船高,所以站外seo引流确实是势在必行。本文为大家介绍几款免费的seo优化东西供大家参考。 Woorank东西会剖…

    2023年6月28日
    00
  • 教你了解网站的基本情况会使用哪些SEO优化工具呢。

    作为seoer应该或多或少都会有几件常用的工具吧,正所谓工欲善其事必先利其器,在好用的工具帮助下,可以让我们更为快速的进行网站情况的分析和判断,进行竞争对手的情况分析的等等,我们在接到一个网站的时候,想要…

    2022年12月6日
    00
  • Fedora操作系统适合哪种类型的用户。

    Fedora操作系统是一个开源的、社区驱动的操作系统,它基于Linux内核,由全球各地的开发者共同维护和改进,Fedora的目标是提供一个稳定、安全、易于使用的桌面环境,同时保持与最新的技术趋势和创新同步,Fedora操作…

    2024年6月28日
    00
  • 关于shopify折扣工具,shopify定价策略是什么。

    折扣券:这个工具简单易上手,你无需知道网站编程,你可以直接进入Shopify店铺管理员界面,创建和运行多个促销活动。当卖家在shopify平台上建站之后,不少用户都会利用一定的折扣方式来推广产品,这对于店铺的发展…

    2023年11月4日
    00
  • 小编教你 淘宝搜索卡位工具哪个好。

    淘宝商家如果要提升流量,可能就需要做单,在多单的时候,大部分产品都是没有排名的,买家根本搜索不到,这个时候,可能就需要用到卡位工具,什么样的工具好呢?一、哪个卡位工具好?今天重点推荐的是:癞蛤蟆工具箱…

    2023年10月16日
    060

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息