New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Chrome Debugging] Can't debug with Chrome devtool #297

Closed
jasonslyvia opened this Issue Mar 27, 2015 · 36 comments

Comments

Projects
None yet
@jasonslyvia
Copy link

jasonslyvia commented Mar 27, 2015

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:

image

Environment:

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

This comment has been minimized.

Copy link

khanghoang commented Mar 27, 2015

Do you have Chrome open?

@jasonslyvia

This comment has been minimized.

Copy link

jasonslyvia commented Mar 27, 2015

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

@weixiyen

This comment has been minimized.

Copy link
Contributor

weixiyen commented Mar 27, 2015

CMD+D

@jiyinyiyong

This comment has been minimized.

Copy link

jiyinyiyong commented Mar 27, 2015

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

This comment has been minimized.

Copy link

micksabox commented Mar 28, 2015

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

This comment has been minimized.

Copy link

lancy commented Mar 28, 2015

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

This comment has been minimized.

Copy link

hinzundcode commented Mar 28, 2015

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

This comment has been minimized.

Copy link

hinzundcode commented Mar 28, 2015

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

@frantic

This comment has been minimized.

Copy link
Contributor

frantic commented Mar 28, 2015

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

@frantic

This comment has been minimized.

Copy link
Contributor

frantic commented Mar 28, 2015

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

@hinzundcode

This comment has been minimized.

Copy link

hinzundcode commented Mar 28, 2015

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

This comment has been minimized.

Copy link

kkganesan commented Mar 30, 2015

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 #15826 active

@jasonslyvia

This comment has been minimized.

Copy link

jasonslyvia commented Mar 30, 2015

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

@skyming

This comment has been minimized.

Copy link

skyming commented Apr 2, 2015

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

This comment has been minimized.

Copy link

Glavin001 commented Apr 20, 2015

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

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

This comment has been minimized.

Copy link

dwilt commented Apr 28, 2015

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:

screenshot 2015-04-28 10 32 00


@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:

screenshot 2015-04-28 10 24 45

@mydearxym

This comment has been minimized.

Copy link

mydearxym commented May 4, 2015

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

This comment has been minimized.

Copy link
Contributor

vjeux commented May 4, 2015

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

@vjeux vjeux reopened this May 4, 2015

@frantic

This comment has been minimized.

Copy link
Contributor

frantic commented May 4, 2015

@mydearxym can you paste logs from Xcode and packager?

@mydearxym

This comment has been minimized.

Copy link

mydearxym commented May 4, 2015

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

@jessepollak

This comment has been minimized.

Copy link

jessepollak commented May 5, 2015

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.
screenshot 2015-05-04 20 33 18

@frantic

This comment has been minimized.

Copy link
Contributor

frantic commented May 5, 2015

@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

This comment has been minimized.

Copy link

jessepollak commented May 5, 2015

@frantic logs are clean - it just is showing the app starting every time I try to enable Chrome Debugging.
screenshot 2015-05-05 09 35 01

I set it up with Cocoapods in an existing app.

/cc @tadeuzagallo

@frantic

This comment has been minimized.

Copy link
Contributor

frantic commented May 5, 2015

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

@jessepollak

This comment has been minimized.

Copy link

jessepollak commented May 5, 2015

@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.
screenshot 2015-05-05 09 59 53

@frantic

This comment has been minimized.

Copy link
Contributor

frantic commented May 6, 2015

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

@a2

This comment has been minimized.

Copy link
Contributor

a2 commented May 6, 2015

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

frantic pushed a commit to frantic/react-native that referenced this issue May 6, 2015

Fixed name of Chome window, Connects to facebook#297
Summary:
Hi!

I have the same problem as described here facebook#297
It could occurs after restarting `packager.sh` or `debuger-ui` page.

I found simple solution that works for me, but I am not 100% sure it will works for any user with this problem.

How could this be tested automatically?
Closes facebook#1101
Github Author: Evgen Filatov <evgen.filatov@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
@strefethen

This comment has been minimized.

Copy link

strefethen commented May 19, 2015

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

@brentvatne

This comment has been minimized.

Copy link
Collaborator

brentvatne commented May 31, 2015

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

@brentvatne brentvatne changed the title Can't debug with Chrome devtool [Chrome Debugging] Can't debug with Chrome devtool May 31, 2015

@jessepollak

This comment has been minimized.

Copy link

jessepollak commented May 31, 2015

👍

@brentvatne

This comment has been minimized.

Copy link
Collaborator

brentvatne commented May 31, 2015

Thanks 😄

@brentvatne brentvatne closed this May 31, 2015

@ohadperry

This comment has been minimized.

Copy link

ohadperry commented Jun 12, 2015

thanks!

@morenoh149

This comment has been minimized.

Copy link
Contributor

morenoh149 commented Dec 16, 2015

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.

rozele added a commit to rozele/react-native that referenced this issue Apr 11, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297

rozele added a commit to rozele/react-native that referenced this issue Apr 21, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297
@fungilation

This comment has been minimized.

Copy link

fungilation commented Apr 22, 2016

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.

rozele added a commit to rozele/react-native that referenced this issue May 17, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297

rozele added a commit to rozele/react-native that referenced this issue May 25, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297

rozele added a commit to rozele/react-native that referenced this issue May 25, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297

rozele added a commit to rozele/react-native that referenced this issue May 25, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297

rozele added a commit to rozele/react-native that referenced this issue May 25, 2016

fix(LayoutShadowNode): Ensure that `onLayout` event fires
For the onLayout event to fire, the UIManager must set the `onLayout` prop to true. This changeset adds a ReactProperty handler for this to the LayoutShadowNode base class.

Fixes facebook#297
@tianwawawa

This comment has been minimized.

Copy link

tianwawawa commented Dec 30, 2016

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

This comment has been minimized.

Copy link

tianwawawa commented Dec 30, 2016

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

cpojer pushed a commit to facebook/metro that referenced this issue Jan 26, 2017

Fixed name of Chome window, Connects to #297
Summary:
Hi!

I have the same problem as described here facebook/react-native#297
It could occurs after restarting `packager.sh` or `debuger-ui` page.

I found simple solution that works for me, but I am not 100% sure it will works for any user with this problem.

How could this be tested automatically?
Closes facebook/react-native#1101
Github Author: Evgen Filatov <evgen.filatov@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.

@facebook facebook locked as resolved and limited conversation to collaborators May 31, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.