位置: 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输出多个预测值)

  • 企业所得税汇算清缴时间
  • 发票验旧以后还有用吗
  • 购买私募基金有风险吗
  • 加计扣除声明在哪里签章有效
  • 小规模增值税附加税税率
  • 融资租赁与按揭贷款区别
  • 本票汇票支票的区别
  • 公司没有收入算正常经营吗
  • 资本公积转增股本什么意思
  • 企业缴印花税分录
  • 怎么查找企业核算报告
  • 企业销售额达到多少交企业所得税
  • 免税单位无租使用纳税单位土地
  • 代扣代缴个人所得税手续费是否缴纳增值税
  • 一般纳税人收到普票如何入账
  • 坏账准备怎么冲回
  • 损益类科目为什么不影响利润
  • 简易计税视同销售如何处理?
  • 收入冲减费用
  • 广告服务类企业有哪些
  • 其他业务成本如何核算
  • 施工成本科目
  • 企业转让库存股,应按实际收到的金额
  • 财务软件的摊销额计入管理费用
  • 工厂返费能拿到吗
  • 税点款怎么算
  • Proxmox ve(PVE) 显示CPU和硬盘温度、UPS信息
  • php教程 ftp 函数
  • 手相算命图解大全女
  • 总分机构分摊比例如何确定
  • 分配税后利润会计分录
  • 吉野是哪里
  • 如何用php做到页数显示
  • img标签铺满div
  • 发票网上平台勾选流程
  • 复制/root/install.log到/tmp
  • ps如何打圈内环形文字怎么调间距
  • 帝国cms视频教程
  • 长期股权投资的账务处理
  • dedecms使用教程
  • spring整合mongodb
  • 收入小于成本是什么意思
  • 个税手续费返还计入哪个科目
  • 投资现金流负值表示什么
  • sqlserver 查询语句
  • 初次购买金税盘怎么做账
  • 认缴 实收资本
  • 补发工资怎么补发
  • 差额征收的有哪些
  • 支付的管理费用调到其他应付款怎么做账
  • 促销服务属于什么服务按什么征增值税
  • 营改增之后账务怎么处理
  • 开票金额大于付款金额 多余部分为返点
  • 成本与费用的区别联系
  • 变更经营范围需要股东会决议吗
  • 存储sql
  • mysql增删改查面试题
  • win10系统提醒
  • window组件在哪里
  • 如何解决焦虑的心理
  • 备份linux命令
  • fssm32.exe是什么进程 有什么作用 fssm32进程查询
  • win7系统无法进入登录界面
  • win7 windows检测到ip地址冲突怎么解决
  • linux中复制目录到另一个目录的命令
  • win8系统笔记本怎么恢复出厂设置
  • linux装完显卡驱动分辨率低
  • opengl clamp
  • jquery实战
  • easyui combotree加载静态数据问题(选不上)解决方法
  • angular scope
  • python 批量操作
  • java script
  • 黄金税率是多少
  • 河源市人民医院上班时间
  • 预征率是2%怎么计算
  • 小规模纳税人专票开1%还是3%
  • 企业所得税的纳税期限按什么计征
  • 建筑公司报销流程
  • 耕地占用税是土地增值税扣除项目吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设