使用node.js开发已经有一段时间了，最开始的调试是使用工具node-inspector；不过node-inspector已经很长一段时间不能用了。 现在要调试node.js程序需要使用新的方式。...--inspect app.js 此时nodejs便启动了调试模式，并打印出调试的url地址,如下： Debugger listening on port 9229....To start debugging, open the following URL in Chrome: chrome-devtools://devtools/remote/serve_file...9229， 要开始调试，在chrome中打开下文中的url地址即可： chrome-devtools://devtools/remote/serve_file/@60cd6e859b9f557d2312f5bf532f6aec5f284980...experiments=true&v8only=true&ws=localhost:9229/13e392f6-51aa-4c0b-9364-393911748471 在chrome中打开浏览器地址，结果如下
很多时候，我苦恼于 Node.js 的调试，只会使用 console.log 这种带有侵入性的方法，但是其实 Node.js 也可以做到跟浏览器调试一样的方便。...devtools 提供了图形化的调试界面。...如何进入 Chrome 的调试界面 第一种方式（自己尝试无效） 打开 http://localhost:8888/json/list，其中 8888 是上面 --inspect 的参数。...[ { "description": "node.js instance", "devtoolsFrontendUrl": "chrome-devtools://...true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "devtoolsFrontendUrlCompat": "chrome-devtools
，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 Devtools Sample[1]和 devtools 操作一遍 参考 1：google developers 官方文档[2] 参考...Firebug[7]：2006年诞生，2007年被Firefox开源，当时只有单一的console面板，带有AJAX日志；于2017停用，Firefox的调试工具转为全新的Devtools。...新版发布速度递增 新功能数量递增 稳定性递减 Chrome Devtools 界面概览 F12打开的界面 几个重要面板简介 Elements面板：实时检查和编辑页面的HTML & CSS...url chrome://flags/ 搜索dev 打开Experimental Extension APIs开关 在settings中找到experiments可以找到相关实验性功能...developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/ [3] Mastering Chrome Developer
如果大家发现网上有抄袭本文章的，欢迎举报，并且积极向这个 github 仓库 提交 issue，谢谢支持~ 本文是“为什么我建议”系列第二篇，本系列中会针对一些在高并发场景下，我对于组内后台开发的一些开发建议以及开发规范的要求进行说明和分析解读...往期回顾： 为什么我建议在复杂但是性能关键的表上所有查询都加上 force index 在业务一开始上线的时候，我们线上日志级别是 INFO，并且在日志内容中输出了代码位置，格式例如： 2022-03...响应式的代码就更是这样了，一层套一层，各种拼接观察点。上面列出的堆栈就是响应式的堆栈。...填充堆栈信息，主要访问的其实就是 SymbolTable，StringTable 这些，因为我们要看到的是具体的类名方法名，而不是类的地址以及方法的地址，更不是类名的地址以及方法名的地址。...由此，我建议：对于微服务环境，尤其是响应式微服务环境，堆栈深度非常深，如果会输出大量的日志的话，这个日志是不能带有代码位置的，否则会造成严重的性能衰减。
手头上有个调试Echarts地图在ios端显示情况的任务，工作电脑是win10，因此在这里，找到了方法。 1 下载iTunes 在官网下载iTunes。才能识别连接的ios设备。...4 启动proxy 在控制台执行： ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html 结果...可以发现地址栏变为： 同时显示该ios设备中Safari浏览器打开的所有页面，和一个提示： Inspectable pages for iPad: http://******** Note:...browser may block the above links with JavaScript console error: Not allowed to load local resource: chrome-devtools...提示显示需要右键点击点击链接，选择复制链接地址，再在新标签页 中打开链接。 就能看到常见的chrome调试接口 6 缺点 发现console输出无效。
本文结构 - 系列文相关 - 内存 & 内存泄漏 & GC - 造成内存泄漏的常见原因 - 内存监控1-Task Manager 任务管理器 - 内存监控2-Devtools...浏览器版本 73.0.3683.103（正式版本）总结 本文目的：关于【devtools 能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 sample[...https://masteringdevtools.com/ [2] google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools...https://i.loli.net/2019/04/19/5cb95639a9f73.png [6] 内存相关术语: https://developers.google.com/web/tools/chrome-devtools.../memory-problems/memory-101 [7] 深入内存分析: https://developers.google.com/web/tools/chrome-devtools/memory-problems
node --inspect index.js 执行命令后，打开浏览器，并导航到 chrome://inspect界面，我们就可以对我们的Nodejs项目进行调试。...点击【Open dedicated DevTools for Node】Node专用调试工具，即可进行调试。 非常方便。 它是如何工作的？...当node 执行 --inspect标识时，V8侦听器会打开一个端口接收WebSocket链接。一旦链接建立完成，以JSON形式的数据包命令就会在侦听器和客户端之间来回发送。...【chrome-devtools://】是一个Chrome浏览器可以识别的特殊的协议。...它可以加载调试工具的UI界面，但是调试工具是通过远程模式进行加载的（remote mode）,这种模式通过chrome-devtools://URI 提供了一个websocket 端点。
Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事。...打开 DevTools 窗口。 如果没有选中 Sources，则手动选中。 ? 源面板允许你查看正在浏览的页面上所有的脚本。...在 DevTools 中使用断点可以调试 JavaScript 代码， DOM 更新以及网络调用。 添加及删除断点 在源面板中，打开一份 JavaScript 文件用于调试。...更多信息查看http://wiki.jikexueyuan.com/project/chrome-devtools/debugging-javascript.html 转载自极客学院http://wiki.jikexueyuan.com.../project/chrome-devtools/debugging-javascript.html
filePath: ', filePath); fs.readFile(filePath, (err, res) => { console.log(err, res.toString()); }); 运行带有...在 Chrome 中打开 浏览器地址栏输入 chrome://inspect/ 按回车键，如下所示： ?...Remote Target 下展示了当前运行的 Node.js 版本号，打开 inspect 或 Open dedicated Devtools for Node 链接，如下所示： ?...**Tips：**当前程序运行在断点第 6 行，鼠标移动到 req.url 上之后会看到该属性对应的值。 ?...Reference chrome-devtools debugging-getting-started
能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 sample[1]和 devtools 操作一遍 参考 1：google developers 官方文档...) 以隐身模式打开网页 （隐身模式可确保 Chrome 以干净的状态运行。...减少请求数 雪碧图 合并压缩css/js（另一个原因是为了减少重绘） 利用Cache-Control等缓存静态资源，在更新静态资源时使用不同url或文件名带上版本 懒加载，出现再加载 参考资料 [1]...https://masteringdevtools.com/ [2] google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools.../tools/chrome-devtools/evaluate-performance/performance-reference - END -
更多快捷键https://developers.google.com/web/tools/chrome-devtools/shortcuts Chrome 开发者工具主要包含以下10个部分： ?...断点调试 代码行断点 当我们知道需要调试的代码的确切位置的时候，使用代码行断点 DevTools 设置代码行断点： 点击 Sources 选项卡。 打开包含您想要调试的代码行的文件。 找到该代码行。...XHR断点 当XHR的请求URL包含指定字符串时，如果要中断，使用XHR断点 设置XHR断点： 点击 Sources 选项卡。 展开 XHR Breakpoints 窗格。 点击添加断点。...输入你想要打断的字符串。当此字符串出现在XHR的请求URL中的任何位置时，DevTools会暂停。 按Enter确认。 ?.../ Pass the function object, not a string. sum(); 未完待续… 参考资料 https://developers.google.com/web/tools/chrome-devtools
-f chrome-devtools://devtools/bundled/inspector.html Mac上打开Chrome浏览器，在地址栏输入http://localhost:9221/，这里会显示所有已连接的设备清单...或者，选中后，鼠标右键复制链接地址 例如： chrome-devtools://devtools/bundled/inspector.html?...ws=localhost:9222/devtools/page/1 打开Chrome新窗口，将复制的地址粘贴后访问 显示html源码信息，则可以获取相应的Webview元素信息。...-f chrome-devtools://devtools/bundled/inspector.html Mac上打开Chrome浏览器，在地址栏输入http://localhost:9221/，这里会显示所有已连接的设备清单...或者，选中后，鼠标右键复制链接地址 例如： chrome-devtools://devtools/bundled/inspector.html?
[image.png] 1.3 调试步骤 先用IPhone 的Safari打开要调试的页面，然后将IPhone连到Mac上，打开Mac的Safari浏览器，在“开发”菜单中选择连接的手机，找到调试的网页...brew install ios-webkit-debug-proxy ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html...过程中遇到的问题 执行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html时报错 Listing devices...其实老版本的在打开localhost:9221页面看到手机上打开的页面之后可以直接右键，在新的标签页直接开始调试。既然新版不支持，那就按照官方的建议继续搞吧。 Round Two ！！！...chrome://inspect 页面，然后按照下图添加适配器的地址就可以看到手机上打开的页面了。
在低端设备上测试Web应用性能 一般而言，我们开发人员都是在具有高速网络连接的高端设备上工作。但不幸的是，我们的用户并不能一直使用高端设备和高速互联网连接。...你可以这样做： 打开Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令菜单。...打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行菜单，输入 Show Rendering 后回车打开渲染面板。...打开 Chrome DevTools，按下 CMD/CTRL + SHIFT + P 打开命令行，输入 Show Network 后回车打开网络面板。...资源： https://developers.google.com/web/tools/chrome-devtools https://twitter.com/ChromeDevTools https:
基于 ios-webkit-debug-proxy 的调试 Mac上的safari调试功能不够好，而且不能调试微信中的页面，使用weinre只能简单地调试微信页面，无法进行脚本断点等高级功能 最好的办法莫过于让...iPhone可Chrome Devtools进行连接，充分利用好的调试工具与现有的平台，进行调试。...bucket add extras 安装工具：scoop install ios-webkit-debug-proxy USB连接设备（或模拟器） 开启ios_webkit_debug_proxy -f chrome-devtools...或者使用Chrome自身的DevTools来调试，即可实现在Window中调试手机Safari页面（然而还是不支持微信内置的） ?...下载越狱版的微信ipa（尽量通过正规渠道获取，也可直接在PP助手下载，下载的时候不要连接手机） ipa是iOS的应用程序文件包，类似安卓中的apk，正常版本的带有加密信息，打包后会出问题，越狱版已经去壳
https://developers.google.com/web/tools/chrome-devtools 我建议在使用的时候要切换成纯英文的 就是这样的一个界面 Ctrl+Shift+I会打开一个调试的窗口...hl=zh-CN 对于所有的Google开发服务,在这里 这里就看一个分析用的SDK 可以看到可以选择要插入的平台 如果选择安卓的话,也有相应二点文档 https://firebase.google.com...platform=Android 一些具体的文档细节 可以选择配置具体收集时的条件 字段用来配置
chrome浏览器是世界上最适合开发人员使用的浏览器的，没有之一。 Live Expression 从 chrome70起，我们可以在控制台上方可以放一个动态表达式，用于实时监控它的值。...点击 "Create Live Expression" 眼睛图标，打开动态表达式界面。 ?...$0 高亮当前所选中的node $0.parentElement 高亮当前所选中的node的父节点 Store DOM nodes as global variables 我们可以把页面上的某元素节点作为全局变量...参考： https://developers.google.com/web/updates/2018/08/devtools https://developers.google.com/web/updates.../2018/10/devtools#bonus https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference
您应使用您的一个 Google 帐户登录到 Chrome。 远程调试在隐身模式或访客模式下无法运行。 打开 DevTools。...image.png 打开远程设备抽屉式导航栏 在 DevTools 中，点击 Settings 标签（如果正在显示另一个标签）。 确保已启用 Discover USB devices。...第 2 步：从您的开发计算机调试 Android 设备上的内容。 如果您尚未在 Android 设备上打开 Chrome，则现在打开它。 返回 DevTools，点击与设备的型号名称匹配的标签。...点击您刚刚打开的网址旁的 Inspect。这将打开一个新的 DevTools 实例。 您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。...https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?
因为是内部用的功能，在测试的时候也没有可以去关注兼容性和一些app端的专项测试，我们只是负责测试自己部门开发的轻应用，接入到公司的平台中能不能正常使用。...2 远程调试android设备 有几个准备事项要先检查一下： 1、将手机与电脑用数据线连接，确保电脑上安装了手机的驱动，手机打开调试模式 2、确保电脑上可以访问谷歌的相关网站，否则无法捕捉到手机上的页面...如果未得到这样的提示信息，可以多重试几次这个步骤，如果页面有标红的报错信息，可以看一下，C盘用户目录下，是否有生成scoop的文件夹，有的话，直接在scoop的文件夹目录下打开powershell窗口，...，如果是抓取ios自带的safari浏览器上访问的网页的话，还需要在iphone的设置->safari-->高级->web检查器，打开对应的开关。...4、在powershell窗口中输入如下命令： ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html ?
注意 如果访问 “chrome://inspect/#devices” 页面会一直提示 404，可以在翻墙情况下，先在 Chrome 访问 https://chrome-devtools-frontend.appspot.com...二、筛选特定条件的请求 在 Network 面板中，我们可以在 Filter 输入框中，通过各种筛选条件，来查看满足条件的请求。 使用场景： 如只需要查看失败或者符合指定 URL 的请求。...关于过滤器更多用法，可以阅读《Chrome DevTools: How to Filter Network Requests》(https://www.freecodecamp.org/news/chrome-devtools-network-tab-tricks...三、快速断点报错信息 在 Sources 面板中，我们可以开启异常自动断点的开关，当我们代码抛出异常，会自动在抛出异常的地方断点，能帮助我们快速定位到错误信息，并提供完整的错误信息的方法调用栈。 ?...六、学习资料 Chrome tips community(https://umaar.com) Chrome 开发者工具中文文档(https://www.css88.com/doc/chrome-devtools
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
