[Chrome Debugging] Can't debug with Chrome devtool

[jasonslyvia]

In iOS Simulator press cmd + d twice, console outputs:

Launching Dev Tools...
Failed to run launchChromeDevTools.applescript { [Error: Command failed: /Code/AwesomeProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: script error: Expected class name but found property. (-2741)
] killed: false, code: 1, signal: null }

Simulator outputs:

Environment:

• OS X 10.10.2
• Chrome 41.0.2272.104 (64-bit)
• Xcode 6.2 (6C131e)

[khanghoang]

Do you have Chrome open?

[jasonslyvia]

Sure I have, I have Chrome open, I even have the devtool open.

[weixiyen]

CMD+D

[tiye]

Anyone ran into this error after pressing Command+D?

RCTJSLog> "Running application "Game2048" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF"
[RCTLog][tid:0x7f8eeb417640][RCTRootView.m:68]>WebSocket debugger is not available. Did you forget to include RCTWebSocketExecutor?
RCTJSLog> "Running application "Game2048" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF"

[micksabox]

I had this same issue "Do you have chrome open?" I found that it worked by moving my project to a file path which did not have a space in it.

[lancy]

I got the same issue.

Then I look into the source code of that applescript, found it just open the chrome and jump to http://localhost:8081/debugger-ui, nothing else.

So you can remove that code and do it by yourself.

[hinzundcode]

I got the issue, too:

Launching Dev Tools...
Failed to run launchChromeDevTools.applescript { [Error: Command failed: /Users/chris/Projekte/AwesomeProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: script error: Expected class name but found property. (-2741)
] killed: false, code: 1, signal: null }

/Users/chris/Projekte/AwesomeProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: script error: Expected class name but found property. (-2741)

osx 10.10.2
xcode 6.2
chome 43.0.2349.0 canary (64-bit)

[hinzundcode]

I changed "Google Chrome" to "Google Chrome Canary" in the applescript, now it works at least sporadic.

[frantic]

I guess we should provide a better error recovery suggestion. Would the instruction to open the link to the UI be helpful?

[frantic]

btw, instead of cmd+d try cmd+ctrl+z - "Enable Debugger", the former shortcut can't disable debugging

[hinzundcode]

Sometimes I get this error:

Launching Dev Tools...
[Error: not opened]
Error: not opened
    at WebSocket.send (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/node_modules/ws/lib/WebSocket.js:187:16)
    at /Users/chris/Projekte/AwesomeProject/node_modules/react-native/packager/webSocketProxy.js:37:12
    at Array.forEach (native)
    at WebSocket.<anonymous> (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/packager/webSocketProxy.js:36:28)
    at WebSocket.emit (events.js:98:17)
    at Receiver.self._receiver.ontext (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/node_modules/ws/lib/WebSocket.js:697:10)
    at Receiver.opcodes.1.finish (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/node_modules/ws/lib/Receiver.js:397:14)
    at Receiver.expectHandler (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/node_modules/ws/lib/Receiver.js:378:33)
    at Receiver.add (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/node_modules/ws/lib/Receiver.js:93:24)
    at Socket.firstHandler (/Users/chris/Projekte/AwesomeProject/node_modules/react-native/node_modules/ws/lib/WebSocket.js:678:22)

[kkganesan]

It does work with the following steps,

1. With simulator opened, Press CMD + D once and the node console would output
   "Launching Dev Tools..."
   [22:27:49] request:/index.ios.bundle
   [22:27:50] find dependencies

2. open chrome http://localhost:8081/debugger-ui (if chrome was not launched in the first step)
   "Status: Waiting for simulator" will be displayed

3. CMD + D again on the simulator will display the following message in the console
   Status: Debugger session View will lost background color when set borderRadius and height is large enough on Android device #15826 active

[jasonslyvia]

@kkganesan I did make it work following your instructions, thanks a lot!

[skyming]

just as @kkganesan you say ,but the node console not find output "Launching Dev Tools..."
just as the following
"[19:42:48] request:/Examples/Movies/MoviesApp.includeRequire.runModule.bundle
[19:42:48] request:/Examples/Movies/MoviesApp.includeRequire.runModule.bundle(15ms)"

[Glavin001]

I am also experiencing this issue, when I have a space in my path.

Just a quick thought: would this be fixable by escaping the path at

react-native/packager/packager.js

Line 171 in 862d9fb

exec(path.join(__dirname, script) + ' ' + debuggerURL, function(err, stdout, stderr) {

? I will have to take a look at this tomorrow. Hopefully this can be resolved for good.

Also, why is this issue closed? The workaround by @kkganesan definitely works for me (thanks!), however it is a workaround not a fix / solution and not a sufficient reason to close this issue.

[dwilt]

UPDATE: The tutorial and initial tab opened by React says to check off the "Pause on Caught Exceptions" - this was taking me to some line inside of jquery and not to the debugger; line that I mentioned before. Unchecking it and refreshing worked and brought me to the line where I could inspect.

I'm still getting this red screen while doing the tutorial - trying to refresh to see my changes:

---

@kkganesan instructions don't seem to be working for me at the moment.

I'm running through the Egghead "React Native: Up and Running" tutorial. When I run the project, it fires up the simulator and I can enable Live Reload and make changes to the JS file that is provided and I can see my changes work. Great.

Following the tutorial, when I put debugger; in the index.ios.js and hit CMD-D in the simulator like @kkganesan suggests in the first step, a Chrome tab does in fact launch at http://localhost:8081/debugger-ui but it doesn't say Status: Waiting for simulator - it shows Status: Debugger session #15826 active. I hit CMD-R to refresh and I get this:

[mydearxym]

why is this issue closed? i have the same problem
OS X 10.9.5
Chrome 41
Xcode 6.2 (6C131e)

i get "Runtime is not ready. Do you have Chrome open?"

[vjeux]

@mydearxym: the author closed it, let me reopen it since it is still an issue

[frantic]

@mydearxym can you paste logs from Xcode and packager?

[mydearxym]

@vjeux @frantic i fellow the #1101 which change the "Google Chrome " to "Chrome" in applescript and problem solved!

[jessepollak]

I'm having a similar issue, but I see nothing in either the packager logs or the XCode logs. One other thing: when I open the developer options and click "Enable Chrome Debugging," the View refreshes, but nothing happens. Then, if I open up the developer options again, it still says "Enable Chrome Debugging" (rather than "Disable Chrome Debugging").

EDIT: In Safari, when I try to use the debugger, I get DOM Exception 18.

[frantic]

@jessepollak - double check your xcode logs. How did you set up your project? with react-native init or Cocoapods? From the symptoms looks like the websocket debug module is not linked. cc @tadeuzagallo

[jessepollak]

@frantic logs are clean - it just is showing the app starting every time I try to enable Chrome Debugging.

I set it up with Cocoapods in an existing app.

/cc @tadeuzagallo

[frantic]

@jessepollak - we used to have a warning but now it's gone :( Basically you need to link this subspec RCTWebSocketDebugger.

[jessepollak]

@frantic awesome, linked and getting closer. Now I'm getting a permission denied error on the file inside. I actually saw this with the packager.sh file when I was starting and I chmod g+x'd it and things started working. I can do the same here, but it obviously points to something bigger.

[frantic]

Hmm, maybe Cocoapods doesn't preserve file attributes? cc @a2

[a2]

@frantic CocoaPods does a git clone so it should preserve file attributes.

[strefethen]

@mydearxym I changed it back from "Chrome" to "Google Chrome" and it fixed my problem. Go figure.

[brentvatne]

@jessepollak - all good now? can we close this?

[jessepollak]

👍

[brentvatne]

Thanks 😄

[ohadperry]

thanks!

[morenoh149]

I'm getting this after updating to 0.17-beta from 0.12. I also went through the app submission process. Opening up http://localhost:8081/debugger-ui works for me. But I get an error if chrome is simply open.

[fungilation]

I'm getting the redbox "Runtime not ready for debugging" while testing on real device. It's all fine in simulator.

I see on RN's doc that I should update RCTWebSocketExecutor.m from "localhost" to my local server IP. I've already done that in AppDelegate.m and running the package on real device works fine. But there is no RCTWebSocketExecutor.m in my current version of RN! (0.24) Is this a case of file reshuffling from older RN version and the file just doesn't exist anymore? If so, what/where should the IP be configured for debugging from running on a real iOS device?

Thanks for advice, and also RN's doc can use updating too perhaps regarding RCTWebSocketExecutor.m.

[tianwawawa]

when i command + d and then press the "debug js remotely", the terminal show "Launching Dev Tools..." ,and i cant touch any component of my app

[tianwawawa]

@kkganesan can you help me about the details that resolve the question?