谷歌工具在哪里(分享开发者工具使用教程)

前端开发中,经常需要调试代码,所以各种调试工具及浏览器控制台的使用会对开发起到很大的作用。下面对目前很受喜欢的Chrome开发者工具进行介绍。Chrome开发者工具是一套内嵌到Chrome浏览器的Web开发工具和调试工具,只要安装了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.salesba.com/archives/20110

(0)

相关推荐

  • ACCA是什么证书 ?(ACCA和CPA有什么区别)

    ACCA和CPA在财会领域都是含金量比较高的证书,但是有不少人都很喜欢拿它们进行比较,到底ACCA和CPA有什么区别?哪个证书含金量高?如何进行选择? 一、证书介绍 ACCA,中文名称为特许公认会计师,在国内可是被称作为“国际注册会计师”,在国际领域上,ACCA可有着十分高的认可度以及含金量,有着国际财会界通行证的美誉。 CPA,关于CPA,相信大家对它已经…

    2022-04-18
    211
  • 进口是什么意思?

    进口,是指货物从国外进口到国内,而出口是指货物从本国出口到国外。 什么是跨境电商进口? 先看看广义 的跨境电商概念。跨境电子商务是指分属不同关境的交易主体,通过电子商务平台达成交易、进行支付结算,并通过跨境物流送达商品、完成交易的一种国际商业活动。 划重点 真正意义上的跨境电商进口(严格来说,应该叫“跨境电商零售进口 ”),是指中国境内消费者通过跨境电商第三…

    2022-04-15
    747
  • 边境贸易是什么?

    边境贸易指两国接壤地区的居民之间的集市贸易。有两种形式: 一种是边境小额贸易,又称”边民区市”,指相邻国家为照顾双方边境居民的需要,在接壤地区 (一般为边境两边各15公里) 准许居民在指定的边境口岸和集市上,在规定的金额、品种的范围内,进行生活必需品和生产资料的小额贸易。另一种是边境地方贸易,是指相邻国家为照顾双方边境毗连地区的建设事…

    2022-04-12
    335
  • 苹果怎么下载line(教你在苹果手机上安装使用LINE)

    什么是line,它是一款通讯聊天软件,日本2011年推出的,全球注册用户3.5亿多,还在继续增长。

    2022-05-09
    2.5K
  • 邮箱号在哪里能找得到(外贸客户邮箱怎么查)

    邮件营销是外贸行业最常见的一种营销方式。我们在搜索客户的时候,也是调查了解客户的过程,这时开发思路更明朗,更有针对性。

    2022-05-09
    457
  • 2个新平台杀入跨境电商(一个流量解渴一个账号6万天价)

    又有2个新平台,
    冲进跨境电商赛道!

    2022-05-04
    337
  • 外贸邮件真的越短越好吗(你还在误区)

    一笔外贸订单的顺利成交和完成需要经过非常多的细节沟通,包括从最初给潜在客户发送开发信或回复询盘,到最终客户收到货物后的售后跟进和维护。 整个外贸业务流程中的每一个细节都需要外贸业务人员能够准确、及时的和国外客户进行有效沟通,只有这样才能确保每一笔外贸订单的高质量交付以及后续客户的持续返单。因此在传统外贸流程中,邮件的重要性不言而喻,本期“阅·话题”小邦就来和…

    2022-05-19
    219
  • paypal登录入口(外贸支付的选择与攻略)

    跨境收款作为跨境电商自建站系统最重要的功能之一,经营外贸独立站需要使用到哪些收款方式呢。做跨境电商有这几种支付收款方式:paypal,信用卡收款,西联、速汇金收款,海外本地支付收款等。下面我一一为大家介绍。

    2022-04-25
    688
  • 货运资格证怎么办理(货运从业资格证办理流程)

    据了解,从业资格证面世已有20年,全国3000万货车司机都期望取消货运从业资格证(道路运输资格证),重复许可、多次认证、费时费力一直是货车驾驶员门的诟病,甚至沦为某些部门机构赚钱工具。虽然如今已经取消4.5吨及以下普通货车的道路运输证和驾驶员从业资格证,但是4.5吨以上仍需要办理货运资格证的。到底货运资格证怎么办理,下面具体了解一下。 办理货运资格证条件 (…

    2022-04-15
    408
  • 美国卖家在亚马逊本土市场份额达55%(中国卖家们怎么了)

    美国卖家在亚马逊本土市场份额达55%(中国卖家们怎么了)

    2022-05-04
    618

发表回复

登录后才能评论

联系我们

在线咨询: QQ交谈

邮件:mail

工作时间:周一至周五,9:30-18:30,节假日休息