使用chrome浏览器调试时的搜索技巧

已于 2023-04-26 09:56:59 修改
阅读量4.6k 收藏 3
点赞数 1
分类专栏： vue 文章标签： chrome
于 2022-11-16 15:46:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/philsphyprgram/article/details/127886579
版权
本文介绍了在Sources面板中快速查找和搜索文件的技巧，包括使用Ctrl+P进行文件搜索，通过右键菜单对应文件位置，以及利用Ctrl+Shift+F进行全局内容搜索。此外，还讲解了如何调试前端代码，通过查看方法调用栈来追踪代码执行路径。
摘要由CSDN通过智能技术生成

一. 查找加载的文件
点一下Sources某个位置，然后ctrl+p，就可以搜索文件了
在这里插入图片描述
二. Sources右侧的文件对应左侧的位置
在要搜索的文件上右击，选择第一个
在这里插入图片描述
三. 全局搜索加载文件的内容
使用CTRL+shift+f,这个显示框的位置在页面的最下方，要注意！！！
在这里插入图片描述

四. 调试前端代码

如下图所示 sendMsg 就是当前方法，想要查找谁调用了sendMsg,就可以点击数字2对应的箭头指向的位置，然后以此类推。
在这里插入图片描述

想要飞翔的企鹅
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chrome的全局搜索快捷键
weixin_43213658的博客
02-09 6209
chrome的全局搜索快捷键 常用 文件内搜索 ctrl+f 使用快捷键 ctrl+shift+f， 就会进入到全局搜索模式 打开文件：ctrl+o 打开DevTools 你可以通过以下任何一种方式来访问DevTools： 打开浏览器右上角的Chrome菜单 Chrome Menu，然后选择“更多工具”–“开发者工具”。 在页面任何元素处点击右键，然后选择“审查元素”。 Windows / Lin...
Chrome浏览器调整搜索标签页按钮位置
景小亮的技术博客
12-06 826
修改完成后，点击Relaunch，重启浏览器，修改生效。搜索 chrome-refresh-2023。地址栏输入 chrome://flags。标签搜索页按钮出现在chrome的。标签搜索页按钮出现在chrome的。
【Windows实用技巧】Chrome提升搜索效率的快捷方法：解锁浏览新速度
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-04 875
访问网站，右键搜索框选择“审查元素”找到搜索URL中的关键字占位符（如打开Chrome设置 > 搜索引擎 > 管理搜索引擎 > 添加。输入搜索引擎名称、关键字（如wiki）和URL模板（如掌握上述技巧，Chrome将不仅仅是一个浏览器，而是你高效工作的超级助手。无论是快速访问、精准搜索还是个性化配置，Chrome的潜力等待你去挖掘。你有没有自己独特的Chrome使用技巧？在日常浏览中遇到哪些挑战？欢迎在评论区分享你的故事，让我们共同探讨，解锁更多提升效率的秘籍。
chrome全局查找
热衷开源的Boy
10-25 1000
chrome全局查找，快速锁定要抓取内容
Android导航栏资源总结，单纯防丢！
隔壁小王的博客
07-05 5664
今天单独把github上导航栏的资源的拿出来总结一下，单纯防丢，都是别人的智慧，不喜勿喷！MagicIndicator https://github.com/hackware1993/MagicIndicator TabbedCoordinatorLayout https://github.com/vitovalov/TabbedCoordinatorLayout android-segme
chrome 浏览器开发者工具之网络面板
薛定谔的猫-前端领域
04-27 2223
1.控制器 2. 过滤器 过滤筛选功能。 通过过滤器模块来筛选你想要的文件类型。 3. 抓图信息 用来分析用户等待页面加载时间内所看到的内容，分析用户实际的体验情况 勾选面板上的“Capture screenshots”即可启用屏幕截图。 4. 时间线 用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系 用于直观感受页面的加载过程。 如果是多条竖线堆叠在一起，那说明这些资源被同时被加载。 5. 详细列表 详细记录了每个资源从发起请求到完...
使用Chrome浏览器调试AngularJS应用的方法
12-07
以下是一些使用Chrome浏览器调试AngularJS应用的关键方法： 1. **访问作用域**： AngularJS中的作用域是数据绑定的核心。通过`angular.element(targetNode).scope()`，你可以获取到指定HTML节点对应的作用域。对于...
JS使用Chrome浏览器实现调试线上代码
10-15
**JS使用Chrome浏览器实现调试线上代码** 在前端开发过程中，线上环境出现的bug往往与开发和测试环境有所差异，为了高效地定位并解决问题，使用Chrome浏览器进行线上代码调试显得至关重要。本文将详细介绍如何利用...
chrome浏览器如何断点调试异步加载的JS
11-23
在JavaScript开发过程中，Chrome浏览器的开发者工具（DevTools）提供了强大的断点调试功能，使得我们能够轻松定位并解决代码中的问题。然而，当涉及到异步加载的JavaScript文件时，如通过`$.getScript`这样的方法...
chrome浏览器调试小技巧
Celester_best的博客
12-09 292
sourses page page栏下可以查看源码 快捷键 ctrl+p：快速查找文件 ctrl+shift+o：快速查找文件中的方法 Snippets Snippet可以创建Snippet文件，在文件中编辑代码之后可以运行代码。 运行方式：ctrl+enter或者右键点击run执行代码 运行代码 控制台输出 断点调试 1、在sourses文件中的对应代码位置添加断点 2、再call stack中右键restart frame可以重...
Chrome插件11: url自动百度搜索功能
weixin_43939924的博客
03-06 1113
{ "manifest_version":2, "name":"FirstChromePlugin", "version":"1.4", "description":"谷歌插件", "author":"Qz1997", "icons": { "16":"img/1.png", "48":"img/1.png", "128":"img/1.png" }, "browser_action": { "default_icon":"img/1.png", "default.
chromium - add user defined scheme name to web-ui
谢绝留言与私信
04-22 2138
默认的web-ui开头的计划名称(scheme)都是chrome://打头, e.g. chrome://version做个实验，尝试执行自定义scheme名称的web-ui, e.g. my://my_hello_world前后弄了一个星期，改完后，点了一下被修改的文件数量，一共改了43个文件.
chrome99关闭阅读清单/侧边栏（Side panel）
幻日のヨハネ
03-23 5626
问题 最新版 chrome 99 默认会新增 阅读清单 side panel 侧边栏的特性。 如果不使用阅读清单，还要让他在快捷栏占用一个按钮是很冗余的（毕竟插件栏的空间很宝贵），所以我们要关掉他。 解法 打开 chrome://flags/ 搜索 reading ，之后 disabled 掉两个与阅读清单相关的特性即可： 重启浏览器结束后即可恢复原状。 ...
chrome右键“使用google搜索”，取消侧边栏显示
m0_62585245的博客
03-16 1804
chrome地址栏输入：chrome://flags/#side-search，回车。显示出的页面的搜索框输入：search web in side panel。右边下拉菜单选择：disabled。
【效率提升】谷歌浏览器搜索技巧
hdz_wiz_csdn的博客
05-31 2046
在任意字词后加上。
chrome 谷歌浏览器命令行大全 (List of Chromium Command Line Switches)
热门推荐
赵亚东的专栏
03-22 3万+
There are lots of command lines which can be used with the Google Chrome browser. Some change behavior of features, others are for debugging or experimenting. This page lists the available switches in
React-Native基于Chrome调试方法
jackywcw的博客
05-02 1067
1、运行命令：npx react-native run-android。
Chrome开发者工具面板详解
qq_37941471的博客
02-25 4303
1. Chrome开发者工具详解(1)：Elements、Console、Sources面板 http://web.jobbole.com/89079/?utm_source=blog.jobbole.com&utm_medium=relatedPosts 2. Chrome开发者工具详解(2)：Network面板 http://web.jobbole.com/89106/ 3. Chro...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值