chrome的一些调试小技巧

已于 2022-07-04 15:59:13 修改
阅读量699 收藏 1
点赞数
分类专栏： 浏览器 文章标签： chrome
于 2020-10-13 16:54:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gegephp/article/details/109047148
版权

一、一些常用的快捷键

  1. Ctrl + Shift + D：切换DevTools窗口的布局（下右）
  2. 切换DevTools选项卡
  • Ctrl + [ 或 ]： 向左和向右
  • Ctrl + 1 到 9：(可能需要DevTools>Settings>Preferences>Appearance中打开)

二、便于开发的小技巧

  1. 遇到bug需要同事帮忙时，可将报错信息保存为文件发送，右击报错信息，
    找到‘save as’即可
    在这里插入图片描述
  2. 使用控制台自带的command面板（快捷键ctrl+shift+p），可以实现全屏截图、节点截图、控制台背景切换、面板布局切换，
    在这里插入图片描述
    在这里插入图片描述

这个小册说的很详细
你不知道的chrome调试技巧<

最低0.47元/天 解锁文章
gegephp
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
chrome浏览器调试小技巧
Celester_best的博客
12-09 280
sourses page page栏下可以查看源码 快捷键 ctrl+p：快速查找文件 ctrl+shift+o：快速查找文件中的方法 Snippets Snippet可以创建Snippet文件，在文件中编辑代码之后可以运行代码。 运行方式：ctrl+enter或者右键点击run执行代码 运行代码 控制台输出 断点调试 1、在sourses文件中的对应代码位置添加断点 2、再call stack中右键restart frame可以重...
前端Chrome控制台调试技巧，超级有用（2024-6-1）
hap1994的博客
06-01 1541
console占位符描述%cCSS样式占位符，值就是CSS样式，如下示例，可用来自定义log的样式%oor%O打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。%dor%i打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01。%s打印字符串。%f打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数：Foo 1.10image.png。
Chrome Devtools调试小技巧
lihui49的博客
05-12 407
对于程序员而言，熟练掌握debug工具和方法无疑是工作中很重要的一部分，而对前端开发工程师来说Chrome Devtools是最为常见的调试工具，本文主要介绍一些使用Chrome Devtools的调试技巧，希望能够帮助开发者们提高Debug水平。01样式调试1. 快速新增/修改class：选中dom中，点击右侧的 .cls激活后，可以通过选择框对现有的class进行删减以及通过输入框新增class。2. 查看计算后的样式：在开发中有一些样式可能是需要通过计算才能得到实际的值的，比如rem，百分比的数值等，
Chrome开发者工具调试小技巧
菜鸟记录
09-21 3871
⏹Chrome开发者工具调试小技巧
Chrome调试技巧
baidu_41604826的博客
04-12 843
1.copy() 在控制台copy某个变量后，就到剪贴板了 2.截屏 Capture node screenshot截取选中的元素 Capture full size screenshot 截取完整的页面 Capture screenshot 截取当前视图内的页面 控制台的Elements中选中某个元素后：Ctrl+Shift +P，输入要截屏的方式，即可截图并下载 3.Snippets 记录控制台的信息 控制台我们输入的内容刷新会丢失，可以写在Sources中的Snippets 中， 4.Over
一些Chrome 调试小技巧汇总
JEECG官方博客
12-17 461
写在前面 本文包括浏览器调试，不包括web移动端调试。 本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出 想必大家都在用console.log在控制台输出点东西，其实console还有其它的方法： console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在控制台打印自定...
JavaScript 在Chrome浏览器调试技巧
纸上得来终觉浅，绝知此事要躬行
08-14 440
这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）...
chrome 调试 ajax,Chrome 调试技巧
weixin_39670627的博客
08-06 502
原标题：Chrome 调试技巧写在前面：本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行。alert这个不用多说了，不言自明。console基本输出想必大家都在用console.log在控制台输出点东西，其实console还有其它的方法：console.log("打印字符串");//在控制台打印自定义字符串console.error("我是个错误");//在控制台打印...
chrome 调试工具小技巧
卡卡西：一个擅长拷贝的前端程序员
03-04 641
参考 https://juejin.cn/book/6844733783166418958/section/6844733783204167687 1.快捷键 切换工具栏位置： command + shift + D 2.切换 devtools 面板 control + [ 向左切换；control+ ] 向右切换 control + 1 到 control + 9 1…9直接切换到对应面板 3.递增/递减 使用 上/下 箭头按键，逐步调整数值（常见于调整css） 4.查找内容：contro
chrome开发调试小技巧
hello917的博客
04-22 975
1. Replay XHR（重新请求） 前端：‘接口报错了，后端童鞋看一下’ 后端：‘ok 你重新请求一下 我打个断点’ 以上场景相信各位开发都遇到过，一般情况下 我们都会下意识刷新页面或者重新进入页面发起请求，其实在chrome的调试工具中自带了一个选项Replay XHR，Network tab中鼠标悬浮要重新发起的接口右键选择Replay XHR即可重新请求 2. Capture node screenshot（截图选中元素） 3. $0 在构建样式修改样式的时候选中元素后面会跟上一个$0变量
Chrome 调试技巧(小结)
10-18
以下是一些关键的Chrome调试技巧： 1. **控制台输出**：`console.log()`是最常用的输出方法，用于打印字符串、变量等内容。除此之外，还有`console.error()`用于标记错误信息，`console.info()`用于信息提示，`...
详解Chrome 实用调试技巧
10-18
主要介绍了详解Chrome 实用调试技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Chrome调试折腾记之JS断点调试技巧
10-19
主要介绍了Chrome调试折腾记之JS断点调试技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Chrome调试JavaScript的断点设置和调试技巧
12-11
你是怎么调试 JavaScript 程序的？最原始的方法是用 alert() 在页面上打印内容，稍微改进一点...如果你精通 Eclipse 中的各种 Java 调试技巧，那么这里的概念都是类似。写作本文时使用的 Chrome 版本为 25.0.1
实用Javascript调试技巧分享(小结)
10-16
本文主要总结了一些实用的JavaScript调试技巧，旨在提高调试效率和体验。 首先，避免使用`alert`来调试。`alert`会阻塞用户界面，且仅能显示字符串形式的数据，对于复杂数据的查看并不友好。推荐使用`console.log`...
Linux进程——环境变量之二
最新发布
ye_yumo的博客
07-25 764
这主要是因为Linux的指令分为两类，一类是bash创建子进程执行的，称之为常规命令，另一类是bash自己执行的，相当于调用一个函数，称之为内建命令。并且我们联系之前的知识，由父进程创建的进程会采用写时拷贝的方式来达到共用的目的，也就是说父进程的环境变量可以被子进程使用。在修改或者定义环境变量时，我们只修改了bash进程中的环境变量，当我们重新登录之后，bash又恢复成原来的样子了。在上面的一系列介绍中，我们很容易产生一种感觉，分为临时的本地变量和全局的环境变量，事实上也就是如此。
chrome 插件:content-script 部分逻辑在页面无法生效,可考虑插入 script 到页面上
汤一飞
07-25 404
插入代码到页面具体方法, 参考该插件, 单独弄一个可独立运行的 js 文件, 打包好, content-script 里使用 chrome.extension.getURL 获取此 js 的地址, 生成 script , 指定地址, 加载。原理不清楚, 可能 content-script 运行的环境跟 script 运行的环境不同导致的吧, 从控制台里打印的语句也能看出来, 控制台也分了层级, 默认当前页面, 底下还有各种插件的控制台。
Shell
2301_80150315的博客
07-24 852
Shell是一个命令行解释器，它接收应用程序/用户命令，然后调用操作系统内核。Shell还是一个功能相当强大的编程语言，易编写，易调试，灵活性强。常用系统变量：$HOME,$PWD,$SHELL,$USER等查看系统变量的值：/root显示当前Shell中所有变量：setset | less​....1.基本语法变量名=变量值，=前后不能有空格unset 变量名readonly 变量，不能unset2.规则变量名称可以由字母、数字和下划线组成，但不能以数字开头，环境变量建议大写。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值