Chrome操作指南——入门篇(二)

简介: Chrome操作指南——入门篇(二)

前言


在我们进行前端代码调试的时候,往往会通过 console.log('彼时彼刻嵌入此时此刻')进行输出日志,来查看代码的信息,或根据报错信息,对代码进行调整。而因此必定会涉及对信息的复制,以此报错信息的导出等操作。在此我整理些小技巧,特此来与大家分享。


Store as global variable (存储为全局变量)


当你想对你所打印的信息进行操作的时候,这个时候我们就可以通过鼠标右键,点击 store as global variable把内容赋值给一个新的变量temp1(当然这是值引用,对他的修改,并不会改变原来的变量。),再次创建的时候会生成temp2,以此类推


image.png

copy(...)


console面板提供了一个全局的方法copy()方法,可以用来复制你所有需要的任何资源。例如上文提到的 store as global variable,我们就可以调用copy()方法进行复制,他会存到你的剪切板中,通过快捷 Ctrl + V即可粘贴。


image.png


Save as...(导出堆栈信息)


当我们多人开发一个项目的时候,需要对console输出的大量信息进行分析的时候,就可以右键选择Sava as...选项导出堆栈信息,通过堆栈信息对问题进行更好的定位和解决,而不是通过一张纸截图来描述问题,从而减少大量不必要的沟通成本,进而提升工作效率。


image.png


Copy HTML


当我们看到一个网站,想要里面的html结构时,就可以单击相应节点旁的三个点(或者直接右键唤起菜单) -> copy -> copy element来对进行复制。


image.png

相关文章
|
3月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
4月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
6月前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
132 2
|
6月前
|
Web App开发 Java Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,使用自定义运行时部署程序时,发现Chrome层已经建立但运行程序仍然缺失如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
Web App开发 JSON 监控
Chrome浏览器扩展开发之自动化操作页面
Chrome浏览器扩展开发之自动化操作页面
448 0
|
Web App开发
chrome配置selenium操作
chrome配置selenium操作
117 0
|
Web App开发 SQL 存储
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
Chrome操作指南——入门篇(一)
|
Web App开发 开发者
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
Chrome操作指南——入门篇(三)
|
Web App开发 前端开发 开发者
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
Chrome操作指南——入门篇(四) command
|
2月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
379 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率