位置: IT常识 - 正文

Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试

编辑:rootadmin
Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试 💂 个人网站:【 海拥】【小霸王游戏机】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识题库:👉进来逛逛

推荐整理分享Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站。

你的 JavaScript 是否曾经无法正确执行,并且你很难找出原因?你的 CSS 是否曾经表现得很奇怪,并且你很难找出原因或让它按预期显示?调试是编程的基本组成部分,也是所有软件开发人员的基本技能。

当你构建网站和应用程序时,你很快就会意识到调试会占用大量时间。因此,学习任何可以帮助你更有效地对 Web 应用程序进行故障排除的工具的基础知识和高级功能将使你成为更好的调试器。

要成为更好的调试器,你必须熟悉使调试更容易的正确工具。本文重点介绍使用 Chrome DevTools 更轻松地对 Web 应用程序进行故障排除的一些最佳做法、关键功能和提示。

什么是谷歌浏览器开发工具?

谷歌浏览器可能是开发人员中使用最广泛和最受欢迎的网络浏览器,因为它与众不同。它已逐渐成为大多数开发人员测试和调试其网站和 Web 应用程序的首选 Web 浏览器。Google Chrome 为开发人员提供了使用浏览器中的内置开发人员工具(又名 DevTools)调试大多数 Web 应用程序的能力,而无需第三方调试工具。

Google Chrome 的开发人员工具中有多种功能和工具可供开发人员直接在浏览器中编辑代码、测试和添加断点以检测问题,并更有效地调试代码。

DevTools 面板的快速视图

要访问 DevTools,请按 Control + Shift + C(在 Windows 或 Linux 上)和 Command + Option + C(在 Mac 上)。此外,你可以右键单击网页的任何部分,选择“检查元素”,或通过选项菜单访问它。

Google 的 Chrome DevTools 窗口在迷你窗口中打开时会在顶部显示一些快速选项卡,以及一些额外的隐藏选项卡,可通过单击它们旁边的 >> 符号或切换到全屏视图来访问这些选项卡。

每个小组的职责的简要总结:

Elements:在这里可以检查和编辑 DOM 节点和样式属性。Console:可以通过控制台查看和运行 JavaScript 代码。Sources:源代码可在此处获得。你可以调试 JavaScript 代码并添加断点等。Network:调试网络相关的活动。你可以查看和监控网络。Performance:分析速度并优化性能。Memory:通过跟踪内存使用情况来修复与内存相关的问题。Application:可以查看sessionStorage、localStorage、IndexDB、cookies,以及其他应用相关的数据文件。Security:调试证书问题和其他安全问题。Lighthouse:让你审核应用程序的性能、可访问性、SEO 等。monitor(function) - 监控一个函数

Chrome 中提供了一些控制台实用程序 API,它们为常见的调试任务提供了方便的功能。顾名思义,monitor() 函数是此类控制台函数之一,用于监视特定函数以了解何时调用该函数以及在调用该函数时将哪些参数传递给该函数。

Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试

目标函数必须作为参数传递给 monitor() 函数,以便它观察任何调用的指定函数。一旦被调用,就会立即将一条消息记录到控制台,其中包含函数名称及其参数,表明该函数已被调用。

使用该unmonitor()功能将取消对该功能的监控。

monitorEvents() - 监控 DOM 对象事件

此函数用于监视 DOM 中的对象是否有特定事件或事件。当在指定对象上触发此事件时,该函数立即将事件和对象输出到控制台。

当指定对象上发生任何指定事件时,Event 对象将被记录到控制台。要监视的事件可以是特定事件、事件数组或映射到预定义集合的通用事件“类型”。

此函数接收应监控的对象和特定事件,即monitorEvents(object [, events]). 例如,要监视窗口对象的任何调整大小事件:

monitorEvents(window, "resize");

输出:

你可以选择性地停止监视对象 ie 上的特定事件unmonitorEvents(object[, events]),或对象 ie 上的所有事件unmonitorEvents(window)。

要了解有关此功能的更多信息,请访问文档。

table() - 将数组输出为表

从数据库或外部 API 获取数据时,它通常以对象数组的形式出现。想象一下,你正试图在你的 chrome 控制台中预览或读取此返回的数据,以找出在你的应用程序中不起作用的内容。该console.log()函数通常将其显示为难以阅读或分类的文本输出。

你显然希望以更易于阅读的有条理的方式查看所有项目、属性及其相关属性。你可以在 chrome 控制台中使用table()函数即 table(data) 来完成此操作。这种方法以更人性化、更易于阅读和理解的表格格式打印和组织信息。

例如:

const users = [ { first: "zhang", last: "san"}, { first: "li", last: "si", birthday: "19990919" }, { first: "wang", last: "wu",},];table(users);

注意:使用 可以实现类似的结果console.table()。

getEventListeners() - 获取事件监听器

使用作为参数传递给它的 DOM 对象调用 getEventListener 函数会返回在该特定对象上注册的所有事件。返回的值是一个对象,其中包含每个注册的事件类型(如点击、按键等)的数组。每个成员数组都包含该事件类型的所有事件,并且可以扩展以探索它们各自的属性,例如它们触发的关联函数。

debug() - 调试函数

为了修复不符合预期的页面、功能或组件,你通常会添加一个“调试器”;

本文链接地址:https://www.jiuchutong.com/zhishi/300781.html 转载请保留说明!

上一篇:【超用心整理】Markdown常用语法介绍,看这一个就够了

下一篇:利用LSTM实现预测时间序列(股票预测)(lstm输出多个预测值)

  • 小米watchs1pro怎么打开久坐提醒(小米watchs1pro怎么下载微信)

    小米watchs1pro怎么打开久坐提醒(小米watchs1pro怎么下载微信)

  • 微信视频聊天声音卡顿(微信视频聊天声音小怎么回事苹果手机)

    微信视频聊天声音卡顿(微信视频聊天声音小怎么回事苹果手机)

  • 钉钉老师把回放删了怎么办(钉钉老师把回放删了)

    钉钉老师把回放删了怎么办(钉钉老师把回放删了)

  • 主板和cpu怎么搭配(主板和cpu怎么搭建)

    主板和cpu怎么搭配(主板和cpu怎么搭建)

  • 华为手机半夜自动重启是什么原因(华为手机半夜自动放音乐)

    华为手机半夜自动重启是什么原因(华为手机半夜自动放音乐)

  • 微信删除好友频繁多久解除(微信删除好友频繁怎么解除)

    微信删除好友频繁多久解除(微信删除好友频繁怎么解除)

  • 拼多多新人全额返规则(拼多多新人全额返是返现金吗)

    拼多多新人全额返规则(拼多多新人全额返是返现金吗)

  • 按住什么键可以多选(按住什么键可以选定多个相邻文件)

    按住什么键可以多选(按住什么键可以选定多个相邻文件)

  • 新手机开机电量多少算正常吗(新手机开机电量40算正常吗)

    新手机开机电量多少算正常吗(新手机开机电量40算正常吗)

  • 相机突然黑屏,什么都用不了怎么办(相机突然黑屏怎么办)

    相机突然黑屏,什么都用不了怎么办(相机突然黑屏怎么办)

  • 小天才z5和z6的区别(小天才z5z6的区别在哪)

    小天才z5和z6的区别(小天才z5z6的区别在哪)

  • 没有打开该文件的应用怎么办(没有打开该文件的权限)

    没有打开该文件的应用怎么办(没有打开该文件的权限)

  • 爱奇艺的面对面快传在哪里(爱奇艺面对面传)

    爱奇艺的面对面快传在哪里(爱奇艺面对面传)

  • 苹果7p电池能给8p用吗(苹果7p电池能给8用吗)

    苹果7p电池能给8p用吗(苹果7p电池能给8用吗)

  • qq卸载了还能查聊天记录吗(qq卸载了还能查看手机通讯录吗)

    qq卸载了还能查聊天记录吗(qq卸载了还能查看手机通讯录吗)

  • 在抖音里自己的作品可以删除吗(在抖音里自己的作品已删别人与你合拍)

    在抖音里自己的作品可以删除吗(在抖音里自己的作品已删别人与你合拍)

  • 携程为什么不能取消优享预订(携程为什么不能代付)

    携程为什么不能取消优享预订(携程为什么不能代付)

  • 导航窗格有什么内容(导航窗格什么用)

    导航窗格有什么内容(导航窗格什么用)

  • 如何确定被淘友拉黑(怎么知道被淘友删除了)

    如何确定被淘友拉黑(怎么知道被淘友删除了)

  • 怎样恢复抖音的私信(怎样恢复抖音的推荐视频)

    怎样恢复抖音的私信(怎样恢复抖音的推荐视频)

  • 充电宝旗舰版和标准版的区别(充电宝旗舰版和升级版有什么区别)

    充电宝旗舰版和标准版的区别(充电宝旗舰版和升级版有什么区别)

  • 相册保密柜在哪里查看(相册保密柜在哪里vivox9)

    相册保密柜在哪里查看(相册保密柜在哪里vivox9)

  • 优酷悬浮窗播放怎么弄(优酷 悬浮窗)

    优酷悬浮窗播放怎么弄(优酷 悬浮窗)

  • qq照片墙在哪(qq照片墙在哪里设置怎么找)

    qq照片墙在哪(qq照片墙在哪里设置怎么找)

  • 怎样安装win7系统,电脑重装win7系统方法汇总(安装win7的步骤)

    怎样安装win7系统,电脑重装win7系统方法汇总(安装win7的步骤)

  • 帝国CMS如何确定页面使用的是哪个模版(帝国cms视频教程)

    帝国CMS如何确定页面使用的是哪个模版(帝国cms视频教程)

  • 增值税发票选择确认平台打不开怎么办?
  • 小规模纳税人如何做账
  • 什么是税法要素
  • 水利建设专项基金的税率
  • 劳务税能退税吗现在
  • 财务报表审计的标准
  • 出差加油算什么费用
  • 电梯维保费属于建筑服务吗
  • 合伙企业每年费用
  • 个税扣除项生效日期
  • 汇算清缴的
  • 公司抬头的发票
  • 金税系统维护费可以全额抵扣吗
  • 投资盈利后可以买股票吗
  • 确认销售收入的重要依据是什么
  • 事业基金弥补收支差额是什么意思
  • 贷款厂家贴息
  • 员工工资可以计入在建工程吗
  • 股东出资不做股本做借款该怎么写分录?
  • 土地价值是否计入GDP
  • 电商平台小规模纳税标准
  • 企业所得税税前不得扣除的项目
  • 纯利润和毛利润哪个多
  • etc卡预充值后怎么办
  • 股东净利润是什么
  • 进料加工出口退税计算 计划分配率
  • 借贷记账法的记账规则是
  • 质保金算合同资产
  • win7更改电脑设置在哪里
  • 远程怎么控制电脑
  • 企业间借款的增值税计算
  • 个人劳务费怎么计算
  • 以物抵债的会计分录
  • 资产负债表短期负债包括哪些
  • 笔记本开机黑屏不显示任何东西
  • macbook版itunes
  • window11正式版什么时候出来
  • 中投公司投资的股票
  • 应交税金减免税款
  • 原始凭证必须具备的基本要素
  • 尿急尿频尿不尽吃什么药效果好
  • php编写网站
  • php数据表
  • 收入的特征包括什么
  • 现金长款和短款怎么处理
  • 房屋无偿赠与合同协议书范本
  • 前端程序员和后端程序员哪个工资高
  • 专项应付款能转出来吗
  • css content \f041
  • 应交税金科目应不应该有余额
  • 银行转账回执单掉了
  • python中datetime.datetime
  • python怎么运行程序
  • 预付款为什么不扣质保金呢
  • 公司购进设备会计分录
  • 什么企业进项多
  • sql server拒绝访问是什么情况
  • 固定资产减少如何处理
  • 银行承兑汇票如果到期了企业没有兑付
  • 固定资产的折旧账务处理
  • 记账凭证错误的更正方法
  • 股东撤资如何退还资金,用途写什么
  • 分公司抬头发票总公司可以抵扣吗
  • 现金流量表现金及现金等价物净增加额
  • 案例分析以前年龄的变化
  • 股东之间转让股权有优先购买权吗
  • 利息收入核算什么科目
  • sqlserver2000怎么用
  • vmware workstation中的虚拟机的终端
  • win8 系统设置
  • mac系统的控制面板在哪
  • 注册表c盘桌面路径改为d盘
  • Linux使用命令行将一个文件夹移动到另一个文件夹
  • 在windows窗口中以下叙述错误的是
  • [置顶]JM259194
  • ubuntu列出用户
  • android 字体设置
  • unity旋转角度范围限制
  • 纳税人初次购买税控设备
  • 丰田威驰2023款1.5自动挡新车报价
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设