前端开发Chrome调试的小技巧

本篇文章介绍了一些chrome调试时的技巧,希望对各位学习前端开发的朋友有帮助!

前端开发Chrome调试的小技巧

前端开发Chrome调试的小技巧

1、呼出快捷指令面板:cmd + shift + p

在Devtools界面下,键入cmd + shift + p将其激活,然后开始在栏中键入要查找的命令或输入?号以查看所有可用命令 .

如下图:其中Open file,Go to line,Go to symbol对于快速打开文件和定位文件位置还是节省了不少时间.

立即学习“前端免费学习笔记(深入)”;

前端开发Chrome调试的小技巧

2、性能监视器: performance monitor

前端开发Chrome调试的小技巧

3、本地覆盖:local overrides

感觉这个特性是超级棒。 使用我们自己的本地资源覆盖网页所使用的资源。 多说无益,直接举个例子大家就明白了。

前端开发Chrome调试的小技巧大家看到了吧,我们可以把网络资源直接和本地资源映射,再次刷新网页,取得资源文件就是本地的了。这种对js、css等文件批量修改调试特别有用。

local overrides还可以模拟Mock数据,如果后端API还不OK或者不想频繁的发布后台API。这个功能是相当有用,不过听说还不支持XHR请求。

4、控制台内置指令

私以为如果网页里面如果没有引用jquery是不是就不能使用$这样的语法了,nonono

$(selector, [startNode]):单选择器

可以选择元素并触发元素事件.

前端开发Chrome调试的小技巧

$$(选择器,[startNode]):全选择器      $x(path, [startNode]):xpath选择器

$x(path)返回与给定xpath表达式匹配的DOM元素数组 .

$x(‘//p’):返回页面上的所有p元素。

getEventListeners(object):获取指定对象的绑定事件

5、Console…的多种用法

1.变量打印:%s、%o、%d、和%c

例如: const text = “文本1”

console.log(打印${text})//结果为打印文本1

登录后复制

2.布尔断言打印:console.assert()

做前端调试时很有用。

3.console.table()内容可以以表格的形式输出.

前端开发Chrome调试的小技巧

更多前端开发技巧,请关注js教程栏目。

以上就是前端开发Chrome调试的小技巧的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2729125.html

(0)
上一篇 2025年3月8日 00:03:56
下一篇 2025年3月3日 01:42:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 必备的12个JavaScript技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。 相关学习推荐:javascript视频教程 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查…

    2025年3月7日
    200
  • node.js中怎么进行调试?

    相关推荐:《nodejs 教程》 用了几天node.js感觉很新奇,但是调试问题实在是愁煞人,开始的时候懒的学习调试方法,看看异常内容就可以了,但随着代码复杂程度的上升,并不是所有错误都是语法错误了,不调试搞不定了,只好搜搜资料,学习了一下…

    2025年3月7日 编程技术
    200
  • 如何在chrome中安装react开发工具

    安装方法:1、在git中下载react-devtools文件并解压;2、打开cmd窗口,使用cd命令进入react-devtools目录;3、使用npm工具安装依赖并打包扩展程序;4、在chrome的“扩展程序”页面中添加扩展程序即可。 本…

    2025年3月7日 编程技术
    200
  • 十款面向前端开发人员的chrome扩展(分享)

    本篇文章给大家分享十款面向前端开发人员的chrome扩展。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 1. CSSViewer   这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在…

    2025年3月7日 编程技术
    200
  • 你可能不知道的Chrome Debug专用的函数!

    在 Chrome 的 DevTools 中的控制台提供了一些 Debug 专用的函数,每一个都身怀绝技。 Console Utility Functions 这些函数只能用在 Chrome 的 console 中。当我在第一次看到这些函数时…

    2025年3月7日 编程技术
    200
  • chrome如何实时修改javascript

    方法:1、按f12打开“开发者工具”-“source选项卡”,找到目标文件;2、在本地创建空文件夹,并创建与目标文件路径一样的文件结构;3、打开“Overrides”选项卡,导入之前的文件夹;4、在“source选项卡”里写入代码即可。 本…

    2025年3月7日 编程技术
    200
  • chrome怎么设置javascript

    chrome设置javascript的方法:首先打开Google Chrome;然后点击右上角选择设置;接着进入设置选项隐私设置和安全性;最后进入网站设置,并在内容中选择Javascript,点击允许即可。 本文操作环境:windows7系…

    2025年3月7日 编程技术
    200
  • 深入了解调试nodejs程序的方法

    对于开发者来说,在开发应用程序的过程中,往往为了开发方便和解决bug需要借助于编程语言的调试功能。一般来说我们需要借助于强大IDE的调试功能来完成这项工作。nodejs也不例外。 今天我们来详细介绍一下如何调试nodejs程序。 开启nod…

    2025年3月7日 编程技术
    200
  • nodejs用什么调试工具

    调试node的工具:1、“node-inspect”,支持“long/async”栈跟踪等高级特性,与Chrome可无缝结合;2、Node Inspector,基于Chrome提供可视化的调试界面;3、Visual Studio Code。…

    2025年3月7日 编程技术
    200
  • 如何开启nodejs调试?如何调试nodejs程序?

    如何调试nodejs程序?下面本篇文章给大家介绍一下nodejs调试debug的方法,希望对大家有所帮助! 对于开发者来说,在开发应用程序的过程中,往往为了开发方便和解决bug需要借助于编程语言的调试功能。一般来说我们需要借助于强大IDE的…

    2025年3月7日 编程技术
    200

发表回复

登录后才能评论