My project is a create react native app project, using expo. I installed the react-native-debugger app a while back to debug redux and it was working fine. Recently, for an unknown reason, when debugging JS remotely it will only open http://localhost:19001/debugger-ui/ in Chrome, and will not connect to the React Native Debugger App. I have no idea why this has suddenly broken. This doesn't work for me as I can't use redux dev tools this way
My package.json has the following:
"devDependencies": {
"jest-expo": "30.0.0",
"react-native-debugger-open": "^0.3.17"
}
OS: Mac OS Mojave
Any ideas on how I can get expo to start using the desktop app again? I don't know what else to do beyond setting up the package.json correctly.
Can't comment cause my rep is under 50,
but I face the same issue on ubuntu 16.04 since this week.
Edit:
You can still use Reactotron in the meantime.
Here is the quick start section for react-native
Related
We inherited an app where the frontend is built in Vue 2 and the mobile app built with cordova-ios (6.2.0) and cordova-android (10.1.1). It has built ok and loaded in the XCode (13.2.1) simulator until recently.
It's got some fairly old packages which I upgraded, and managed to get it to run both in vue ui and Android Studio (Chipmunk). (I had upgraded the packages because somewhere along the line that build broke -- so I deleted node_modules and package-lock.json, then upgraded packages one by one until I got it working again.)
However, when I do the Cordova build for iOS, open the project in XCode, do an XCode build, then open it up in a simulator, the screen is completely blank.
These are the only files that changed in version control between releases:
package.json
package-lock.json
babel.config.js
(various Vue files under src/views)
I'm fairly new to mobile development so don't really know how to proceed. How would I go about debugging the project (simulator, XCode, whatever) to see what has broken?
Any extra information you need please ask.
Edit 1: Avinash's suggestion about debugging via Safari Dev Console was a good tip (thanks Avinash). I've checked the app HTML vs a working build and it seems somehow the injection of the app content into <div id="app"> is not happening. In the android version it's fine, so maybe something in the cordova build is not happy.
There's an error message in the debug logging in XCode saying it could not load the "LaunchStoryboard" image referenced from a nib in the bundle with identifier which is also different from the output in a working build.
Avinash's suggestion is spot on in that it can help troubleshoot startup problems (I've had to do this a bunch of times myself). From your update, it sounds like there's an issue with the splash screen configuration.
There's some iOS specific documentation for the splash screen plugin on the Cordova documentation website. A couple tips that might be useful in tracking down the issue:
You can use a single image for the splash screen if desired. I've got just one defined for my app (the needed dimensions are defined in the Cordova docs above):
<platform name="iOS">
...
<splash src="www/res/screen/ios/Default#2x~universal~anyany.png" />
</platform>
I have also run into issues where the storyboard file has gotten corrupted, probably by me falling on my keyboard and clicking on something while the editor was open. To rebuild, you can remove and re-add the iOS platform:
$ cordova platform rm ios
$ cordova platform add ios
This should copy over the splash image and rebuild the storyboard file.
I have updated my app to Nativescript 7. One thing I haven't been able to get to work correctly is debugging using Chrome Dev Tools. It does use the Chrome Dev Tools console, but I can't seem to get the Network tab to work or the Elements tab. Has anyone else managed to get it to work?
My app uses Angular 10 and Nativescript 7.
I believe they fixed this in a recent update for NS. Try updating and see if that fixes it.
If not you can update your package.json file to use "#nativescript/ios": "6.5.3",. That'll use the JSC compiler for iOS instead of the new V8 runtime, then your element and network inspector should work!
On Mac, I created a React Native project via create-react-native-app and then ejected the app. Then I ran npm run ios, which is an alias for react-native run-ios. At that point, I can see it start up in the simulator and the packager opens in a new terminal window. It looks like it is watching for any changes on JS files in my project directory, yet when I make a basic edit in the JSX in the App.js file, I don't see anything happening in the packager terminal window and it doesn't reload the app in the simulator.
Edit: I just tested it on the react-native CLI and it happens there as well. I'm at a loss what the issue could be.
Am I missing something or is there another issue?
For the app to refresh, you need to do Cmd + R which refreshes the packager and lets it watch the refreshed bundle. For Realtime Loading, use Cmd + D to enable the devtools and enable Hot Reloading. Hope it helps!
Steps to Reproduce / Screenshots
Apply all operations from the instruction:
Create a blank React Native project with $ react-native init [project name].
From the command Palette (Cmd-Shift-P), choose "Nuclide React Native: Start Packager" to start the React Native Server.
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: $ react-native run-ios (or choose another existing simulator, for example, react-native run-ios --simulator="iPhone4s").
(Important: #4 should follow AFTER #3, and chrome debugger should be closed).
From the iOS simulator, press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. For example, select Debug JS Remotely.
Environment
Atom version 1.15.0
Nuclide plugin version 0.214.0
React Native version: 0.42.3
Platform(s) (iOS, Android, or both?): iOS
Device info Simulator/Device? - Simulator iOS 10.2 / iOS 8.1
OS version? - MacOS 10.12.3
Debug/Release? - Debug
In the same doc said: "...After you enable debugging (#5) from the simulated application, Nuclide will attach to that debugging process automatically since we primed the Debugger above (#3)." So before I clicked Debug JS Remotely I saw the working react app as expected:
And after I clicked Debug JS Remotely I see that the Nuclide debugger changed its status from Starting debugger... to The debuggee is currently running. as expected as well:
BUT after I click Debug JS Remotely I see white screen only
And there are no errors. As soon as I turn off remote debugging, everything loads fine again.
This happens with Nuclide debugger only, with chrome debugger, everything works well.
check maybe there is no breakage in your code. it sometimes happens when you skip some minor errors.
I wanted to debug my mobile web app that would be running on a mobile device or simulator (like iOS simulator). On googling a lot I came across Weinre but could not figure out how to install on my macbook.
I was able to comfortably install weinre following the instructions on page http://blog.joelambert.co.uk/2012/05/17/installing-weinre-on-mac-os-x/ .
After installation, I executed weinre command which started a server on http://localhost:8080. I typed the same on my desktop browser which gave me further instructions. It asked me to copy-paste a script tag (similar to <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>) into the page (http://myMobApp.local) that I was trying to remotely debug. I did that and opened the mobile app page on my iOS simulator. After it loaded in simulator I open the debug client user interface link (similar to http://localhost:8080/client/#anonymous) that was shown on the instructions page. It gave me a beautiful interface to debug the web app running on simulator.
Short update: though Goje87's answer is perfectly accurate, I want to point out that as of iOS 6, Apple has supercharged Safari's web inspector to be able to inspect HTML pages running within apps on iOS devices.
The advantage over Weinre is that you can even debug JS scripts (breakpoints, watches etc.).
Here's a guide on making this work: http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
EDIT: You need a Mac for this.