react native斷點調試--Debug React-Native with VSCode

.babelrc

{

  "presets": [ "react-native" ],

  "sourcemaps": true

}

many javascript developers are used to simply log stuff into the console when debugging their software. this works kinda okay. sadly it seems the console feature on react-native isn't that sophisticated as in state of the art browsers. often, big outputs are simply swallowed or you simply get the beloved  ​<code>​[object object]​</code>​ which hasn't much information to provide either. sometimes you can't even use  ​<code>​json.stringify()​</code>​ to get around this. 

but as you may expected, there is a better way, a  debugger . 

simply speaking, a debugger is a program that lets you put  breakpoints at lines of your source code and watch the values of specific variables. while i have the feeling that logging still seems the way to go for most js developers, most browsers and node.js provide you with debug interfaces or fully integrated graphical interfaces. so it shouldn't be a foreign concept. 

in my opinion, debugging brings the most fun when used with the tool you wrote your code in the first place. for me this is currently  ​​vscode​​ . 

vscode comes with a huge  ​​extension eco-system​​ , one of these happens to be  ​​specifically for react-native​​ and is even created by microsoft itself, probably because  ​​they also build things with rn​​ . 

while it comes with a whole bunch of features, the one i care about the most is a nice debugger integration.

i expect you to already have vscode and the react-native cli installed.

first, you need to install the extension into your vscode via the  extensions icon on the left menu. the extension is called  react native tools . 

then you need to create (or update) your  ​<code>​.babelrc​</code>​ . these are the basic settings that have to be included: 

after that you need to create a debug environment by clicking on the  debug icon on the left menu and then on the gear. this will present you a few debug environments to choose from, here you choose  react native . 

this will generate a  ​<code>​launch.json​</code>​ inside a  ​<code>​.vscode​</code>​ directory for you, which has a few configurations that will be used, when you start a debugging session. 

after this, you simply need to set a breakpoint somewhere in your code, select one of the configurations in the select box besides the green run arrow in the debug view and click the arrow. you'll notice that the names in the select box correspond to the names in the ​<code>​launch.json​</code>​ . 

while this seems all straight forward, i encountered 2 problems.

one was the fact, that you need to explicitly  enable debugging in your app via the  react-native debug menu , on the ios simulator it's opened with  ​<code>​cmd+d​</code>​ . otherwise your breakpoints will be gray and the debugger won't stop. 

the other one is that breakpoints only worked inside react's component methods. when i set a breakpoint at a place where i defined a variable, class or function in the top scope of a ​<code>​.js​</code>​ file/module it would not be hit. i didn't get around this problem at the moment. 

debugging is much nicer than logging. it gives you direct insight of your runtime code, while letting you stay in your beloved editor, it also doesn't require you to write additional logging code you would have to delete later.

https://www.tuicool.com/articles/mynimjn

------------------越是喧嚣的世界，越需要甯靜的思考------------------

合抱之木，生于毫末；九層之台，起于壘土；千裡之行，始于足下。

積土成山，風雨興焉；積水成淵，蛟龍生焉；積善成德，而神明自得，聖心備焉。故不積跬步，無以至千裡；不積小流，無以成江海。骐骥一躍，不能十步；驽馬十駕，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓無爪牙之利，筋骨之強，上食埃土，下飲黃泉，用心一也。蟹六跪而二螯，非蛇鳝之穴無可寄托者，用心躁也。