1.3 Debug tools

1.3 Debug tools

2.Chrome Devtools

3.log

1. console.log('some text');
2. console.dir({a:1, b:2, c:3});
3. debugger;//breaking point

4.Atom & nuclide

5.inspect

Open Atom Command Palette package with cmd-shift-p and search "inspector", then click "Nuclide React Native Inspector:Show"

6.Real device

6.1 Deploy to real deviceproject_name/ios/project_name/AppDelegate.m

2. //jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

4. /**
5. * OPTION 2
6. * Load from pre-bundled file on disk. The static bundle is automatically
7. * generated by the "Bundle React Native code and images" build step when
8. * running the project on an actual device or running the project on the
9. * simulator in the "Release" build configuration.
10. */

12. jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

6.2 Debug in real device

1.project_name/ios/project_name/AppDelegate.m

2. jsCodeLocation = [NSURL URLWithString:@"http://172.28.0.230:8081/index.ios.bundle?platform=ios&dev=true"];

2.node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.m

1. if (!_url) {
2. NSUserDefaults *standardDefaults = [NSUserDefaults standardUserDefaults];
3. NSInteger port = [standardDefaults integerForKey:@"websocket-executor-port"] ?: 8081;
4. NSString *URLString = [NSString stringWithFormat:@"http://172.28.0.230:%zd/debugger-proxy?role=client", port];
5. _url = [RCTConvert NSURL:URLString];
6. }

原文: <https://unbug.gitbooks.io/react-native-training/content/13_debug_tools.html>