为什么React.js有时候不让我使用`debugger`

时间：2017-03-06 20:38:54

标签： javascript reactjs debugging

有时我可以在我的React组件中放置debugger;语句，但它有效，有时则不然。例如，我正在调用我的反应组件：

<script type="text/javascript">
    debugger;
    var nav = React.createElement(SubLocationSelector, {instanceID: @Model.InstanceID, locationID: @Model.LocationID, OnSublocationSelected: function(id, fullPath) {alert("ID: " + id + "; FullPath: " + fullPath);}}, null);
    ReactDOM.render(nav, document.getElementById("drill-down-nav"));
</script>

并且它的调试器点被击中。但是在React组件中：

class SubLocationSelector extends React.Component{
    constructor(props) {
        debugger;
        super(props);
        this.model = new SubLocationSelectorViewModel();
        this.model.loadSubLocations(this.props.locationID);
    }
    componentWillReceiveProps(nextProps) {
        debugger;
        if(nextProps.locationID != this.props.locationID){
            this.model.loadSubLocations(nextProps.locationID)
        }
    }
    render() {
        debugger;
        return (
            <ViewModelBinder model={this.model}>
                <SublocationSelectorDisplay model={this.model} 
                                            OnSublocationSelected={this.props.OnSublocationSelected} />
            </ViewModelBinder>
        )
    }
}
如果我在开放devtools的Chrome中运行代码，

这些调试点都不会被点击。我还没有找到为什么我的一些反应组件与调试器一起工作而有些没有，但我非常有信心它与React有关。

此外：有没有办法解决这个问题？

编辑：

有人认为这可能是一个babel插件的罪魁祸首，例如remove-debugger。以下是npm ls列出的babel插件：

npm ls gets me this

我没有.babelrc个文件或package.json。

在我的整个解决方案中搜索remove-debugger没有结果。

EDIT2：

babel可能会使用两种不同的package.jsons：

{
  "_args": [
    [
      {
        "raw": "babel-runtime@^6.20.0",
        "scope": null,
        "escapedName": "babel-runtime",
        "name": "babel-runtime",
        "rawSpec": "^6.20.0",
        "spec": ">=6.20.0 <7.0.0",
        "type": "range"
      },
      "C:\\develop\\trakref\\node_modules\\babel-traverse"
    ]
  ],
  "_from": "babel-runtime@>=6.20.0 <7.0.0",
  "_id": "babel-runtime@6.20.0",
  "_inCache": true,
  "_location": "/babel-runtime",
  "_nodeVersion": "6.9.0",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/babel-runtime-6.20.0.tgz_1481239547266_0.8724558432586491"
  },
  "_npmUser": {
    "name": "hzoo",
    "email": "hi@henryzoo.com"
  },
  "_npmVersion": "3.10.8",
  "_phantomChildren": {},
  "_requested": {
    "raw": "babel-runtime@^6.20.0",
    "scope": null,
    "escapedName": "babel-runtime",
    "name": "babel-runtime",
    "rawSpec": "^6.20.0",
    "spec": ">=6.20.0 <7.0.0",
    "type": "range"
  },
  "_requiredBy": [
    "/babel-messages",
    "/babel-traverse",
    "/babel-types"
  ],
  "_resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.20.0.tgz",
  "_shasum": "87300bdcf4cd770f09bf0048c64204e17806d16f",
  "_shrinkwrap": null,
  "_spec": "babel-runtime@^6.20.0",
  "_where": "C:\\develop\\trakref\\node_modules\\babel-traverse",
  "author": {
    "name": "Sebastian McKenzie",
    "email": "sebmck@gmail.com"
  },
  "dependencies": {
    "core-js": "^2.4.0",
    "regenerator-runtime": "^0.10.0"
  },
  "description": "babel selfContained runtime",
  "devDependencies": {
    "babel-helpers": "^6.6.0",
    "babel-plugin-transform-runtime": "^6.9.0"
  },
  "directories": {},
  "dist": {
    "shasum": "87300bdcf4cd770f09bf0048c64204e17806d16f",
    "tarball": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.20.0.tgz"
  },
  "license": "MIT",
  "maintainers": [
    {
      "name": "amasad",
      "email": "amjad.masad@gmail.com"
    },
    {
      "name": "hzoo",
      "email": "hi@henryzoo.com"
    },
    {
      "name": "jmm",
      "email": "npm-public@jessemccarthy.net"
    },
    {
      "name": "loganfsmyth",
      "email": "loganfsmyth@gmail.com"
    },
    {
      "name": "sebmck",
      "email": "sebmck@gmail.com"
    }
  ],
  "name": "babel-runtime",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "https://github.com/babel/babel/tree/master/packages/babel-runtime"
  },
  "scripts": {},
  "version": "6.20.0"
}

和这一个：

{
  "_args": [
    [
      {
        "raw": "core-js@^2.4.0",
        "scope": null,
        "escapedName": "core-js",
        "name": "core-js",
        "rawSpec": "^2.4.0",
        "spec": ">=2.4.0 <3.0.0",
        "type": "range"
      },
      "C:\\develop\\trakref\\node_modules\\babel-runtime"
    ]
  ],
  "_from": "core-js@>=2.4.0 <3.0.0",
  "_id": "core-js@2.4.1",
  "_inCache": true,
  "_location": "/babel-runtime/core-js",
  "_nodeVersion": "6.2.2",
  "_npmOperationalInternal": {
    "host": "packages-16-east.internal.npmjs.com",
    "tmp": "tmp/core-js-2.4.1.tgz_1468791807265_0.5941079026088119"
  },
  "_npmUser": {
    "name": "zloirock",
    "email": "zloirock@zloirock.ru"
  },
  "_npmVersion": "3.9.5",
  "_phantomChildren": {},
  "_requested": {
    "raw": "core-js@^2.4.0",
    "scope": null,
    "escapedName": "core-js",
    "name": "core-js",
    "rawSpec": "^2.4.0",
    "spec": ">=2.4.0 <3.0.0",
    "type": "range"
  },
  "_requiredBy": [
    "/babel-runtime"
  ],
  "_resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz",
  "_shasum": "4de911e667b0eae9124e34254b53aea6fc618d3e",
  "_shrinkwrap": null,
  "_spec": "core-js@^2.4.0",
  "_where": "C:\\develop\\trakref\\node_modules\\babel-runtime",
  "bugs": {
    "url": "https://github.com/zloirock/core-js/issues"
  },
  "dependencies": {},
  "description": "Standard library",
  "devDependencies": {
    "LiveScript": "1.3.x",
    "es-observable-tests": "0.2.x",
    "eslint": "3.1.x",
    "grunt": "1.0.x",
    "grunt-cli": "1.2.x",
    "grunt-contrib-clean": "1.0.x",
    "grunt-contrib-copy": "1.0.x",
    "grunt-contrib-uglify": "1.0.x",
    "grunt-contrib-watch": "1.0.x",
    "grunt-karma": "2.0.x",
    "grunt-livescript": "0.6.x",
    "karma": "1.1.x",
    "karma-chrome-launcher": "1.0.x",
    "karma-firefox-launcher": "1.0.x",
    "karma-ie-launcher": "1.0.x",
    "karma-phantomjs-launcher": "1.0.x",
    "karma-qunit": "1.1.x",
    "phantomjs-prebuilt": "2.1.x",
    "promises-aplus-tests": "2.1.x",
    "qunitjs": "2.0.x",
    "temp": "0.8.x",
    "webpack": "1.13.x"
  },
  "directories": {},
  "dist": {
    "shasum": "4de911e667b0eae9124e34254b53aea6fc618d3e",
    "tarball": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz"
  },
  "gitHead": "5e106f64c726edf2849f0babc9096ce6664b7368",
  "homepage": "https://github.com/zloirock/core-js#readme",
  "keywords": [
    "ES3",
    "ECMAScript 3",
    "ES5",
    "ECMAScript 5",
    "ES6",
    "ES2015",
    "ECMAScript 6",
    "ECMAScript 2015",
    "ES7",
    "ES2016",
    "ECMAScript 7",
    "ECMAScript 2016",
    "Harmony",
    "Strawman",
    "Map",
    "Set",
    "WeakMap",
    "WeakSet",
    "Promise",
    "Symbol",
    "TypedArray",
    "setImmediate",
    "Dict",
    "polyfill",
    "shim"
  ],
  "license": "MIT",
  "main": "index.js",
  "maintainers": [
    {
      "name": "zloirock",
      "email": "zloirock@zloirock.ru"
    }
  ],
  "name": "core-js",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zloirock/core-js.git"
  },
  "scripts": {
    "grunt": "grunt",
    "lint": "eslint es5 es6 es7 stage web core fn modules",
    "observables-tests": "node tests/observables/adapter && node tests/observables/adapter-library",
    "promises-tests": "promises-aplus-tests tests/promises-aplus/adapter",
    "test": "npm run lint && npm run grunt livescript client karma:default && npm run grunt library karma:library && npm run promises-tests && npm run observables-tests && lsc tests/commonjs"
  },
  "version": "2.4.1"
}

1 个答案:

答案 0 :(得分：1)

尝试将debugger替换为eval('debugger')，babel不会转换字符串值。

相关问题
最新问题