0
ときどきdebugger;文を自分のReactコンポーネントに入れても動作しますが、時には正しく動作しません。たとえば、私はこのような反応コンポーネントを呼び出しています：なぜReact.jsで `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>
とそのデバッガポイントがヒットします。しかしリアクトコンポーネント内：デベロッパーツールのオープンで、私はChromeでコードを実行する場合は、これらのデバッガポイントの
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>
)
}
}
どれもヒットしませんます。なぜ私の反応コンポーネントのいくつかがデバッガで動作しているのか、どうして反応しないのか分かりませんでしたが、Reactとは関係があります。
さらに：この動作を修正する方法はありますか？
EDIT：
このような削除、デバッガなどバベルプラグインの犯人であることが示唆されています。ここでnpm lsによって記載されているバベルのプラグインです：
私は.babelrcファイルまたはpackage.jsonを持っていません。
私のソリューション全体でremove-debuggerを検索すると結果が得られません。
EDIT2：
{
"_args": [
[
{
"raw": "[email protected]^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": "[email protected]>=6.20.0 <7.0.0",
"_id": "[email protected]",
"_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": "[email protected]"
},
"_npmVersion": "3.10.8",
"_phantomChildren": {},
"_requested": {
"raw": "[email protected]^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": "[email protected]^6.20.0",
"_where": "C:\\develop\\trakref\\node_modules\\babel-traverse",
"author": {
"name": "Sebastian McKenzie",
"email": "[email protected]"
},
"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": "[email protected]"
},
{
"name": "hzoo",
"email": "[email protected]"
},
{
"name": "jmm",
"email": "[email protected]"
},
{
"name": "loganfsmyth",
"email": "[email protected]"
},
{
"name": "sebmck",
"email": "[email protected]"
}
],
"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"
}
と、この1：
{
"_args": [
[
{
"raw": "[email protected]^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": "[email protected]>=2.4.0 <3.0.0",
"_id": "[email protected]",
"_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": "[email protected]"
},
"_npmVersion": "3.9.5",
"_phantomChildren": {},
"_requested": {
"raw": "[email protected]^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": "[email protected]^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": "[email protected]"
}
],
"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"
}
デバッガの下に 'console.log'がある場合は、それが表示されますか？ – finalfreq
おそらくコンソールやデバッグ文を削除しているwebpack/babelトランスフォームがあるので、 –
@finalfreqはい、 'console.log'が表示されます – levininja