【chrome】在做项目使用chrome调试的时候，调整Console的位置

最新推荐文章于 2024-07-19 15:38:18 发布
最新推荐文章于 2024-07-19 15:38:18 发布
阅读量131 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/sxdcgaq8080/p/6660029.html
本文介绍了一个简单的谷歌浏览器调试技巧：如何在Sources面板中同时查看JS源码和Console控制台输出。只需按下ESC键，即可轻松切换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在新的电脑上安装了谷歌浏览器 ，然后在调试系统的时候，发现console这个控制台，模拟调试js的位置无法显示到source以下，

 

解决问题：

怎么样让console控制台显示到sources下，在查看js源码的同时又能查看console模拟控制台的js调试呢？

在sources界面下，按下ESC按钮，即可！

 

转载于:https://www.cnblogs.com/sxdcgaq8080/p/6660029.html

9种使用Chrome Firefox 自带调试工具调试javascript技巧
10-18
6. **监控函数调用**：在Chrome控制台中，可以使用`console.trace()`或`console.profile()`来追踪特定函数的调用路径和参数。这有助于识别函数何时被调用以及传递的参数。 7. **快速访问元素**：在控制台中，使用`$...
使用Chrome调试JavaScript的断点设置和调试技巧
10-25
本文将详细介绍如何在Chrome中设置和使用JavaScript断点，以及相关调试功能。 首先，Chrome的SourcesPanel是调试JavaScript的主要工作区。在SourcesPanel的左侧，你可以看到页面加载的所有资源，按域名进行分类，...
console 的定位
ARM Linux and soul
10-12 2643
首先在init/main.c的init函数中建立了系统的stdin和stdout if (open("/dev/null", O_RDWR, 0)   printk("Warning: unable to open an initial console./n"); (void) dup(0); (void) dup(0);打开的/dev/null设备，这也是导致busybox开始printf不能显
Google Chrome 的console台位置调整
博客
08-11 8144
在进行前端开发的时候，按E12调用控制台的时候，一直自己当做一个弹窗，点击本页面的时候，console被压倒下面，非常麻烦： 上网找没找到解决方案，于是挨个点击console的设置选项，最后终于找到了，在最左上角有三个点，点击： 在第一行选择Dock side另外三个样式就可以了。...
Chrome开发者工具-Console(一)
qq_46469137的博客
10-28 1532
JavaScript控制台 JavaScript控制台主要为开发者提供两方面功能： 查看使用Console API提供的方法记录的代码诊断信息 和DevTools其他面板进行交互，运行JavaScript 查看从JavaScript记录的消息 点击警告图标旁边的展开图标，DevTools会显示调用的堆栈跟踪。如下图显示，函数logWarning被调用了，该函数又调用了函数quoteDante。首先被调用的函数位于堆栈跟踪的底部，开发者可以随时通过 console.trace() 来记录堆栈跟踪
如何使用edge浏览器或chrome谷歌浏览器调试手机端网页（微信网页、浏览器皆可）
ForidaAxu的博客
01-22 8770
5、然后点击各个网页左下角的inspect就能进入调试页面了，注意：这里滚动鼠标滑轮进行上下翻页，手机端的页面也会跟着上下翻页，但是仅支持翻页，鼠标点击链接是没有任何反应的，调试仅支持单个页面。1、打开开发者选项中的USB调试功能（狂点“关于手机”中的版本号，然后返回到系统设置中就能看到开发者选项了，一定要打开USB调试功能！（若使用chrome谷歌浏览器，则输入网址：chrome://inspect/#devices）3、打开edge浏览器或，输入网址：edge://inspect/#devices。
chrome浏览器如何断点调试异步加载的JS
11-23
在JavaScript开发过程中，Chrome浏览器的开发者工具（DevTools）提供了强大的断点调试功能，使得我们能够轻松定位并解决代码中的问题。然而，当涉及到异步加载的JavaScript文件时，如通过`$.getScript`这样的方法...
使用VScode 插件debugger for chrome 调试react源码的方法
12-08
在面向dom开发的时代，我们开发时直接在chrome里打断点是很方便的。 但是，当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码，还想在浏览器里打断点几乎是不可能的了。 场景 那怎么办，方法总是比困难...
如何开发chrome浏览器插件？插件能做什么？示例源码 调试 A simple Chrome extension
最新发布
02-07
在编写和调试Chrome插件的过程中，开发者需要熟悉Chrome扩展程序的API，这些API能够帮助插件访问浏览器的特定功能，例如标签页管理、书签管理、网络请求拦截等。开发者还可以使用Chrome扩展程序提供的开发者工具来...
babel-plugin-console-source：将文件名和行号添加到所有控制台日志中
01-31
Babel插件控制台源 根据源文件，为每个控制台命令添加文件名和行号。 // app.js class App ( ) { constructor ( ) { console . log ( 'test' ) } } ↓ ↓ ↓ ↓ ↓ ↓ class App ( ) { constructor ( ) { console . log ( 'app.js (3:8)' , 'test' ) } } // test.js class Test ( ) { constructor ( ) { console . log ( 'test two' ) } } ↓ ↓ ↓ ↓ ↓ ↓ class Test ( ) { constructor ( ) { console . log ( 'test.js (3:8)' , 'test two' ) } } 用法 $ yarn add babel-plugin-console-source -D .babelrc {
Chrome远程调试
Struggling_Jeff的博客
05-07 4832
Chrome远程调试。
手机chrome浏览器真机调试PC端本地的项目
KOOK007的博客
07-26 3287
手机chrome浏览器真机调试PC端本地的项目
Chrome真机调试Android 你不知道的Chrome调试技巧
幻影浪子
07-19 2161
2、使用usb数据线连接手机端（手机端chrome浏览器版本和桌面端最好相近或一致，安卓手机需要选择usb调试并支持文件传输，识别到设备后，就可以看到远程设备调试设备目标Remote Target）谷歌开发者工具提供了一系列的功能来帮助开发者高效Debug网页应用，让他们可以更快地查找和修复bug。在谷歌的开发者工具中，有非常多有用的小工具，但是很多开发者并不知道。比如你想查看手机端浏览器运行时的调试日志，怎么办呢？使用电脑端谷歌浏览器的远程调试功能即可。3、找到你要调试的应用，并点击下面的。
使用谷歌浏览器 devtools 调试node项目
没化妆，别看
08-31 1084
当我们写node项目时，可以通过谷歌浏览器自带的devtools帮助我们debug我们的node项目。如图所示，此时我们就进入了项目调试啦，可以发现，在js文件右下角有绿色小点，意味着此时代码正在运行。如上图所示，当出现Debugger…用postman或者apifox发送请求。点击发送之后，会自动切换到debug界面。点击右上角箭头可以按照断点执行，分析代码。并且在该窗口修改代码是会。...
Chrome浏览器远程调试地址
baidu_40537062的博客
04-17 1089
chrome://inspect/#devices
一分钟教你学会浏览器调试工具debugger
qq_43682422的博客
09-07 6381
调试代码：在开发者工具的 “Sources” 或 “调试” 面板中，找到你的源代码文件（通常在 “localhost” 或 “webpack” 目录下），然后找到你添加了 debugger 的代码行。查看变量和调试信息：在开发者工具的 “Sources” 或 “调试” 面板中，你可以查看和检查代码中的变量值、调用栈和其他调试信息。然后，可以使用调试工具栏中的按钮（如 “继续”、“单步执行”、“跳过”）来逐行执行代码，并观察变量的值和调试信息。触发断点：在浏览器中执行触发该断点的操作。
Google Chrome 官方调试使用教程
robinson_911的专栏
01-05 1807
Chrome Google官方调试教程
Chrome开发者工具：深入解析console.log与调试技巧
"Chrome控制台使用详解是一篇关于如何在Google Chrome浏览器中有效调试JavaScript的实用教程。该文档主要介绍了Chrome开发者工具中的控制台功能，这些功能对于前端开发者来说至关重要。文章首先详细讲解了`console....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值