在React Native项目的终端中,运行react-native run-android命令,将应用安装到安卓设备上。 打开安卓设备上的开发者选项,并启用USB调试模式。 将安卓设备通过USB连接到开发机上。 在开发机上,运行adb logcat命令,查看设备的日志输出。 在设备上打开React Native应用,并导航到包含WebView的页面。
1.React-Native-Debugger工具调试法 1.1 首先我们得下载一个React NativeDebugger的调试软件 1.2其次,我们找到我们要调试的那个文件,假设这个文件叫做account.js,那么我们打开上面下载的软件 并且同时按下ctrl + P,这时候会弹出一个输入框,输入文本就可以找到我们的account.js 1.3 打开之后,就可以愉快的断点调试啦,点击...
首先,我们需要在应用程序中调用WebView.setWebContentsDebuggingEnabled(true); 文件位置:在MainActivity.java的onCreate方法内(在android / app / src / main / java / com / [appname]处找到)。 (注意:添加该代码后,需要重启项目。) importandroid.webkit.WebView;@OverridepublicvoidonCreate() {super.onCreat...
在断点调试过程中,如果想要查看某个变量或者表达式,可以选中后右键,然后选中“Evaluate in Console”来观看选中的值的结果。 临时修改JavaScript代码 在调试代码过程中,对于非脚本语言的开发者们通常会有这样的调试过程:修改代码–>重新run工程–>再次调试,直到修改到想要的结果。但是Chrome中可以临时修改JS文件中的内容,...
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。 试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的...
之前一直用chrome调试,一个是不习惯前端调试方法,毕竟是android 出身嘛还是习惯IDE调试,还有就是源码位置总要滑到底才能找到,很麻烦。突然发现ReactNative也能用IDE调试真是喜出望外啊,将配置和调试方法记录一下。 IDE设置 首先配置项,点击Edit Configurations ...
React Native(以下简称 RN)目前在 Shopee 前端团队得到大量应用。RN 虽然有很多优势,但是其开发和调试流程与 Mobile Web 相比却不那么友好,特别是在运行时的调试。 在开发模式下,虽然 RN 提供了官方的调试工具,但是相比纯前端的浏览器 Devtool,它的功能比较弱;而非开发模式下,例如 Test 和 UAT 环境,RN 代码被...
一、模拟器调试 我们在ios模拟器上按快捷键 command + D,安卓模拟器上按快捷⌘ + m,即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。 1,Reload 刷新页面,其快捷键是(iOS) command + R/(安卓)两按R键。 注意:只有修改 JavaScript 文件时,刷新功能才起作用。如果新增了文件或者修改了 Native 代码,...
yarn add react-native-vdebug import React from 'react' import { createNativeStackNavigator } from '@react-navigation/native-stack' import { getRouter } from './config' import { ErrorBoundary } from '../component/light' import VDebug, { initTrace, setExternalContext } from 'react-native-...
React Native Version:0.51 RN 在 0.37 版本中加入了WebView功能,所以想要在使用WebView,版本必须>=0.37,发送的 message 只能是字符串,所以需要将其他格式的数据转换成字符串,在接收到后再转换回去,其实直接用JSON.stringify和JSON.parse就可以 加载html