当错误给出错误的数字时，如何找到 React 错误的行号？

Question

我使用 Sublime Text 和 ESLint 来捕获任何明显的语法错误。我也在开发模式下使用 webpack。然而我犯了这样的错字：

console.log(articls); // line 14 missing e, article does not exist

并从 React 中得到了一份神秘的打印结果。它没有给我正确的行号/列号，正如我想象的那样。

除了在开发模式下运行 linter 和 webpack 之外，我还能做些什么来获得准确的行号。

它告诉我错误在第 25 行，第 25 行是空白。错误在第 14 行。

Chrome 的错误报告不正确。

react_devtools_backend_compact.js:2367 出现上述错误 <WEBPACK_DEFAULT_EXPORT> 组件：

at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./A1Bookmark/A1Bookmark.jsx?:25:66)
at div
at div
at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./F1Page/F1Page.jsx?:31:70)
at div
at __WEBPACK_DEFAULT_EXPORT__ (webpack:///./F1/F1.jsx?:32:70)
at Provider (webpack:///./node_modules/react-redux/es/components/Provider.js?:16:3)

考虑向树中添加错误边界以自定义错误 处理行为。访问 https://reactjs.org/link/error-boundaries 来 了解有关错误边界的更多信息。

实际文件：（第 1 - 25 行）

import                                  './A1Bookmark.css';
import React, { useEffect, useState }   from 'react';
import { useSelector }                  from 'react-redux';

export default () => {
  const [tag, setTag] = useState('Nutrition');
  const articles = useSelector((state) => state.Articles.articles);
  const top_hash = {};

  function makeTopHash() {
    if(!articles) {
      return;
    }
    console.log(articls);
    articles.forEach((article) => {
      if(!(article.tag in top_hash)) {
        top_hash[article.tag] = {};
      }
      if(!(article.domain in top_hash[article.tag])) {
        top_hash[article.tag][article.domain] = {};
      }
    });
  }
  makeTopHash();
  // blank line 25

Answer 1

一个名为“console ninja”的 VS code 插件可能会有所帮助。它在代码旁边显示“console.log”的输出和运行时错误。

Answer 2

禁用源映射：如果您在开发版本中使用源映射，它们有时会导致报告的行号出现差异。尝试暂时禁用源地图并查看错误消息是否提供更准确的位置。在您的 webpack 配置中，将 devtool 选项设置为 false 或完全删除它。

添加“use strict”指令：添加“use strict”；指令位于 JavaScript 文件顶部或封闭函数内。这有时可以帮助 JavaScript 引擎提供更准确的错误位置。