使用Chrome开发者工具来在设备上调试

最新推荐文章于 2021-09-28 12:45:55 发布
最新推荐文章于 2021-09-28 12:45:55 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： react native 文章标签： react native问题 react native调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddddwwww2/article/details/53437256
版权
如果需要使用chrome开发者工具调试手机设备上的js，需要先参考  

react native reload相关问题解决办法 进行配置，


在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在Chrome中调试JavaScript代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.

在Chrome的菜单中选择Tools → Developer Tools可以打开开发者工具。

注意：Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。


欢迎关注微信公众号：




镰刀出海
关注
专栏目录
React Native调试技巧
慕天远的博客
08-27 338
首先在模拟器上运行项目，打开调试菜单 ，选择Debug JS Remotely菜单项。Chrome浏览器会走动启动并打开一个React Native Debugger页面。如下图： 按住Ctrl+Shift+J打开DevTools工具，点击下图中的按钮，将项目文件夹添加到soure选项卡中。 添加了项目工程文件后，如下图： 在需要调试的地方加上断点 注意此时已经执行到断点并...
chrome - 开发者工具调试技巧
m0_70242402的博客
08-11 4216
谷歌浏览器（通常简称为 Chrome ）是由谷歌开发的网络浏览器。在开发工作中，Chrome极大的方便开发调试代码。主流的浏览器都内置了 DevTools，掌握 Chrome 的调试技巧，可以提高工作效率。对于测试人员来说，掌握Chrome 的调试技巧，可以快速判断一些前后端问题，抓取协议，判断接口是否ok，截图、还有进行弱网测试等等。...
chrome-开发者工具debugger调试
热门推荐
登峰小蚁
04-10 2万+
资源贴：https://blog.csdn.net/crper/article/details/50722753 1、首先在你的需要停下来的地方加上 -debugger标记 在开发者工具中，可以直接打断点，前提你能清楚的找到js代码，建议使用上面的debugger，目的明确。   2、刷新页面，进入调试状态   3、打开开发者工具 快捷键发f12，进入source面板 ...
用Chrome开发者工具调试一切
hmy1106的专栏
04-08 1301
自Google发布Chrome浏览器以来，其附带的Chrome开发者工具就深受开发者们的喜爱，现在人们不仅仅用它来调试Web前端页面，还将它扩展用来调试移动应用和服务端应用。在错误报告平台Bugsnag负责社区和内容的Kristine Pinedo近日撰文，总结了基于Chrome开发者工具的各种调试工具。 首先是移动应用。对于iOS原生应用，你可以用PonyDebugger来调试。它由Squ
webstorm断点调试ReactNative
飞翔的熊blabla
07-23 1298
1. 用 Chrome 断点调试RN 不用安装 React Develper Tools 谷歌浏览器插件，也能断点调试 摇晃手机，在菜单中选择 Debug JS Remotely ，自动调用 Chrome inspect --> Sources --> 找到 debuggerWorker.js ,点开看到源代码，就能断点调试了 2. 用webstorm断点调试 ex...
2021-09-28
qq_32228265的博客
09-28 154
学习RN文档 一、调出开发菜单 直接摇晃手机 F1或F2 命令行中运行adb shell input keyevent 82 Command⌘ + D（IOS） CommonModule.dealWithRoute(‘https://test.yoaimedicine.com/view/OrderCreate?mode=fastPayMode’); 二、手动完全刷新 在开发菜单中点击"Reload"选项 Android 模拟器上对应的则是按两下R（Android） Command⌘ +
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）
一条宝鱼的专栏
10-25 4368
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试） 一、模拟器调试 我们在ios模拟器上按快捷键command + D，安卓模拟器上按快捷⌘ + m，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。 1，Reload 刷新页面，其快捷键是（iOS） command + R/（安卓）两按R键。 注意：只有修改JavaScript文件时，刷新功能才起作用。如果新增了文件或者修改了Native代码，就需要使用Xcode重新编译应用了。 2，De...
Chrome调试
chenmoquan的专栏
04-08 8179
Chrome 的开发者工具分为 8 个大模块，每个模块及其主要功能为： Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。 Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。 Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。 TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。 Prof
Chrome 开发者工具中文手册
04-13
Chrome开发者工具是Google Chrome浏览器内置的一套强大的网页开发和调试工具，它为前端开发者提供了丰富的功能，包括元素检查、网络监控、源代码编辑、性能分析等。这份“Chrome开发者工具中文手册”旨在帮助用户...
DevTools:使用 Chrome 开发者工具说明基本 Javascript 调试的单页应用程序
07-02
用于说明使用 Chrome 开发人员工具进行基本 Javascript 调试的基本单页应用程序。 克隆回购 CD 进入“DevTools”目录 对于开发，运行grunt serve 当你准备好构建你的项目时，运行grunt build 玩得开心！
使用Chrome开发者工具对本机iOS应用进行远程调试-Swift开发
05-27
通过$ npm i安装[weex-toolkit] [电子邮件保护] -g然后运行命令：$ weex debug您可以看到QR weex-devtool-使用Chrome开发者工具为您的本机iOS应用进行iOS远程调试启动首先，通过$ npm i安装weex-toolkit [受电子邮件...
PonyDebugger:使用Chrome开发者工具对本机iOS应用进行远程网络和数据调试
04-20
它是客户端库和网关服务器的组合，使用浏览器上的Chrome开发者工具来调试应用程序的网络流量和托管对象上下文。 要使用PonyDebugger，您必须在应用程序中实现客户端并将其连接到网关服务器。 当前有一个iOS客户端...
chrome开发者工具-timeline的详细介绍
09-24
Chrome开发者工具中的Timeline功能是优化Web应用性能的关键工具，它帮助开发者深入了解页面的渲染...在实际工作中，熟练运用Chrome开发者工具Timeline可以帮助开发者提升Web应用的性能，减少页面延迟，提高用户体验。
react-native 之"Debug JS Remotely"模式下不能打断点?
文化园
06-08 3654
react-native debug模式下 不能进行打断点？ 不知道有没有别的朋友遇到过，反正我是实实在在、真真切切的遇到了这种奇葩问题！ 情景是这样的，之前刚开始学习的时候，进入ReactNative debug模式下 就能直接打断点并进行调试。可最近项目写的越来越大，然后里面出现了很多黄色警告 ，本来以为是警告太多问题导致，然后就花了点时间逐个把黄色警告的问题解决！再次进入RN的调试页...
react-native debug js remotely跨域问题
weixin_34208283的博客
04-19 486
react-native debug js remotely跨域问题 我们在安卓真机上调试react-native时，启用debug js remotely的时候，会出现跨域问题。这个时候我们只需要一下操作即可 一：右击谷歌浏览器的启动图标，选择属性然后在目标里的最后加入一下代码（前面有空格） --disable-web-security --user-data-dir ...
调试菜单中的问题
weixin_30681615的博客
08-25 138
mac上是command+d弹出调试选项，然后选择Debug JS Remotely ,如果电脑装了chrome，就会自己打开调试界面，然后在按command + option + i 按钮，就带开了调试界面。 我的一直连接不到模拟器，不知道为何？ 转载于:https://www.cnblogs.com/liuw-flexi/p/11408522.html...
React Native移动开发实战-2-如何调试React Native项目
weixin_34198881的博客
08-07 143
在实际开发中，还有一个影响开发效率的重要因素：调试。在1.4.3节中已经介绍了Enable Live Debugger的使用。本节来介绍另一个非常重要的调试选项：Debug JSRemotely选项。（1）晃动设备或使用模拟器上的快捷键（iOS模拟器快捷键command + d，Android模拟器快捷键command + m）打开调试选...
Adjacent JSX elements must be wrapped in an enclosing tag
ddddwwww2的博客
11-26 8490
Adjacent JSX elements must be wrapped in an enclosing tag render方法中必须只能包含一个根元素。
Node.js调试入门：利用Chrome开发者工具详解
本文是一篇关于Node.js调试工具的基础教程，针对JavaScript编程中复杂的脚本环境，重点介绍如何在Node环境中有效地使用Chrome开发者工具进行调试。自2016年起，Node.js采纳了Chrome浏览器的开发者工具作为官方调试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值