You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Highlighted in bold is your project, using the name you gave in the **New Project** dialog box. On disk, this project is represented by a .*njsproj* file in your project folder.
61
+
- Highlighted in bold is your project, using the name you gave in the **New Project** dialog box. On disk, this project is represented by a .*njsproj* file in your project folder.
62
62
63
-
- At the top level is a solution, which by default has the same name as your project. A solution, represented by a .*sln* file on disk, is a container for one or more related projects.
63
+
- At the top level is a solution, which by default has the same name as your project. A solution, represented by a .*sln* file on disk, is a container for one or more related projects.
64
64
65
-
- The **npm** node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.
65
+
- The **npm** node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.
66
66
67
-
1. If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose **Open Command Prompt Here**.
67
+
2. If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose **Open Command Prompt Here**.
Copy file name to clipboardExpand all lines: docs/javascript/tutorial-nodejs-with-react-and-jsx.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -348,27 +348,27 @@ In the preceding section, you attached the debugger to server-side Node.js code.
348
348
349
349
1. Close all Chrome windows.
350
350
351
-
1. Open the **Run** command from the Windows **Start** button (right-click and choose **Run**), and enter the following command:
351
+
2. Open the **Run** command from the Windows **Start** button (right-click and choose **Run**), and enter the following command:
352
352
353
353
`chrome.exe --remote-debugging-port=9222`
354
354
355
355
This starts Chrome with debugging enabled.
356
356
357
-
1. Switch to Visual Studio and set a breakpoint in *app-bundle.js* code in the `render()` function as shown in the following illustration:
357
+
3. Switch to Visual Studio and set a breakpoint in *app-bundle.js* code in the `render()` function as shown in the following illustration:
358
358
359
359

360
360
361
361
To find the `render()` function in *app-bundle.js*, use **Ctrl**+**F** (**Edit** > **Find and Replace** > **Quick Find**).
362
362
363
-
1. With Chrome selected as the debug target in Visual Studio, press **Ctrl**+**F5** (**Debug** > **Start Without Debugging**) to run the app in the browser.
363
+
4. With Chrome selected as the debug target in Visual Studio, press **Ctrl**+**F5** (**Debug** > **Start Without Debugging**) to run the app in the browser.
364
364
365
365
The app opens in a new browser tab.
366
366
367
-
1. Choose **Debug** > **Attach to Process**.
367
+
5. Choose **Debug** > **Attach to Process**.
368
368
369
-
1. In the **Attach to Process** dialog box, choose **Webkit code** in the **Attach to** field, type **chrome** in the filter box to filter the search results.
369
+
6. In the **Attach to Process** dialog box, choose **Webkit code** in the **Attach to** field, type **chrome** in the filter box to filter the search results.
370
370
371
-
1. Select the Chrome process with the correct host port (1337 in this example), and select **Attach**.
371
+
7. Select the Chrome process with the correct host port (1337 in this example), and select **Attach**.
372
372
373
373

374
374
@@ -377,20 +377,20 @@ In the preceding section, you attached the debugger to server-side Node.js code.
377
377
> [!NOTE]
378
378
> If the debugger does not attach and you see the message "Unable to attach to the process. An operation is not legal in the current state.", use the Task Manager to close all instances of Chrome before starting Chrome in debugging mode. Chrome Extensions may be running and preventing full debug mode.
379
379
380
-
1. Because the code with the breakpoint already executed, refresh your browser page to hit the breakpoint.
380
+
8. Because the code with the breakpoint already executed, refresh your browser page to hit the breakpoint.
381
381
382
382
While paused in the debugger, you can examine your app state by hovering over variables and using debugger windows. You can advance the debugger by stepping through code (**F5**, **F10**, and **F11**).
383
383
384
384
You may hit the breakpoint in either *app-bundle.js* or its mapped location in *app.tsx*, depending on your environment and browser state. Either way, you can step through code and examine variables.
385
385
386
-
* If you need to break into code in *app.tsx* and are unable to do it, use **Attach to Process** as described in the previous steps to attach the debugger. Then open the dynamically generated *app.tsx* file from Solution Explorer by opening **Script Documents** > **app.tsx**, set a breakpoint, and refresh the page in your browser (set the breakpoint in a line of code that allows breakpoints, such as the `return` statement or a `var` declaration).
386
+
* If you need to break into code in *app.tsx* and are unable to do it, use **Attach to Process** as described in the previous steps to attach the debugger. Then open the dynamically generated *app.tsx* file from Solution Explorer by opening **Script Documents** > **app.tsx**, set a breakpoint, and refresh the page in your browser (set the breakpoint in a line of code that allows breakpoints, such as the `return` statement or a `var` declaration).
387
387
388
-
Alternatively, if you need to break into code in *app.tsx* and are unable to do it, try using the `debugger;` statement in *app.tsx*, or set breakpoints in the Chrome Developer Tools instead.
388
+
Alternatively, if you need to break into code in *app.tsx* and are unable to do it, try using the `debugger;` statement in *app.tsx*, or set breakpoints in the Chrome Developer Tools instead.
389
389
390
-
* If you need to break into code in *app-bundle.js* and are unable to do it, remove the sourcemap file, *app-bundle.js.map*.
390
+
* If you need to break into code in *app-bundle.js* and are unable to do it, remove the sourcemap file, *app-bundle.js.map*.
391
391
392
-
> [!TIP]
393
-
> Once you attach to the process the first time by following these steps, you can quickly reattach to the same process in Visual Studio 2017 by choosing **Debug** > **Reattach to Process**.
392
+
> [!TIP]
393
+
> Once you attach to the process the first time by following these steps, you can quickly reattach to the same process in Visual Studio 2017 by choosing **Debug** > **Reattach to Process**.
0 commit comments