英文:
reactjs: chrome browser console log: unable to locate the error location of which line and file
问题
在运行我的ReactJS应用程序时，我可以在控制台中看到以下警告。但不幸的是，我无法理解错误来自何处以及如何纠正它。
英文:
While running my reactjs application i can see an warning in my console as below. But unfortunately i am not able to understand where the error is coming from and how to rectify this.
答案1
得分: 0
浏览器控制台错误会显示引发异常的文件、行号和列号。您的堆栈跟踪显示异常在bundle.js的第20893行，第66列引发。您应该能够单击该链接，打开Chrome Dev工具的“Sources”选项卡中的文件。但是，bundle.js是从构建过程生成的JavaScript文件（您可能正在使用Webpack、Vite或其他构建工具），它不太友好于调试。调试错误的最佳方式是使用源映射。源映射是将捆绑和转译后的JavaScript映射到源代码的文件。如果将它们与生产构建文件一起分发，Chrome Dev工具可以直接在源文件中映射错误，而不是在捆绑文件中。您可以在以下资源中了解更多信息：
英文:
The browser console error outlines file, line and column number that caused the exception. Your stack trace says that the exception is raised in bundle.js at line 20893, column 66. You should be able to click the link and open the file in the Chrome Dev tools Sources tab. However, bundle.js is the JavaScript file generated from your build process (you are probably using Webpack, Vite or some other budnler) and it's not very debug friendly. The best way to debug errors is by using Source Maps. Source Maps are files that map the bundled and transpiled JavaScript to your source code. If you distribute them them along with the production build files, Chrome Dev Tools are able to map the error directly in your source files, not in the bundled one. You can read more at the following resources:
- https://web.dev/source-maps/
- https://webpack.js.org/configuration/devtool/ (if you are using Webpack)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论