zoukankan      html  css  js  c++  java
  • react debug from VS Code —— the Debugger for Chrome extension

    原文:https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

    To debug the client side React code, we'll need to install the Debugger for Chrome extension.

    Note: This tutorial assumes you have the Chrome browser installed. There are also debugger extensions for the Edge and Firefox browsers.

    Open the Extensions view (Ctrl+Shift+X) and type 'chrome' in the search box. You'll see several extensions which reference Chrome.

    Press the Install button for Debugger for Chrome.

    Set a breakpoint#

    To set a breakpoint in index.js, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.

    Configure the Chrome debugger

    We need to initially configure the debugger. To do so, go to the Run view (Ctrl+Shift+D) and click create a launch.json file to customize Run and Debug. Choose Chrome from the Select Environment drop-down list. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.

    We need to make one change for our example: change the port of the url from 8080 to 3000. Your launch.json should look like this:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:3000",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }

    Ensure that your development server is running (npm start). Then press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached, so we won't hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.

    You can step through your source code (F10), inspect variables such as element, and see the call stack of the client side React application.

    The Debugger for Chrome extension README has lots of information on other configurations, working with sourcemaps, and troubleshooting. You can review it directly within VS Code from the Extensions view by clicking on the extension item and opening the Details view.

  • 相关阅读:
    谷歌浏览器禁用缓存
    web项目中各种路径的获取
    visual studio 2015常用快捷键
    Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值
    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
    OAuth学习总结
    今日技术碎片
    碎片化的一天
    软件架构简史
    竞态条件概念
  • 原文地址:https://www.cnblogs.com/panpanwelcome/p/14537657.html
Copyright © 2011-2022 走看看