开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我使用react时，为什么我不能在chrome中调试没有括号的部分代码？

当你使用React时，不能在Chrome中调试没有括号的部分代码的原因是因为React使用了JSX语法，而JSX语法需要通过Babel等工具进行转译成普通的JavaScript代码才能在浏览器中运行。没有括号的部分代码可能是JSX语法中的标签，而浏览器无法直接识别和执行这些标签。

为了解决这个问题，你可以按照以下步骤进行调试：

确保你的React项目已经正确配置了Babel或其他相关工具，以将JSX语法转译成普通的JavaScript代码。
在Chrome浏览器中打开开发者工具（可以通过右键点击页面，选择"检查"或"审查元素"来打开）。
在开发者工具的顶部选择"Sources"（或"资源"）选项卡。
在左侧的面板中，找到并展开你的React项目的文件目录。
找到你想要调试的文件，并点击打开。
在打开的文件中，你应该能够看到转译后的JavaScript代码。你可以在这里设置断点、单步执行代码等进行调试。

需要注意的是，由于转译后的代码可能与你编写的源代码有所不同，所以在调试时需要注意对应关系。此外，如果你的代码中存在语法错误或其他问题，也可能导致无法在Chrome中调试。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云容器服务（TKE）。

腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统和应用场景。详情请参考：腾讯云云服务器产品介绍
腾讯云容器服务（TKE）：提供高度可扩展的容器化应用管理平台，支持快速部署、弹性伸缩、自动化运维等功能，适用于容器化应用的开发、测试和生产环境。详情请参考：腾讯云容器服务产品介绍

相关搜索:为什么当我使用邮递员时，我的SuiteQL POST请求可以工作，但是当我在VS代码终端中cURL相同的代码时，它返回'INVALID_LOGIN‘当我使用@ManyToOne时，为什么我不能在我的数据库中插入一行？当我使用Flask呈现一个模板时，为什么我的html代码没有输出变量的值？当我使用Svelte-grid for React时，为什么我在VS代码中得到"Identifier expected“当我在React中向输入标记写入文本时，为什么我的文本没有更改当我尝试使用OOP和类时，为什么我的代码在python中显示NameError？当我尝试在组件上使用数组方法时，为什么我的数组变量在组件中没有定义？当我请求用户输入并将其添加到列表中时，为什么我的代码没有更改？当我遵循的每个示例都使用相同的强制转换时，为什么我不能在没有致命异常的情况下将字符串转换为浮点型？我正在使用JOptionPane，当我尝试输入第一个"?“的项目Id时，我不确定为什么它不工作。它在我的代码中询问

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

刚开始学编程？这几款小工具能让你事半功倍

如果你是个经验丰富的开发人员，也希望你能从中学到一些新的东西。我将把这篇文章分为Chrome扩展程序和VS代码扩展扩展程序两部分。...我知道还有其他的浏览器和文本编辑器，但是我想你当然只能在你能找到的工具里选择，所以还是别因为个人喜好而引起一场宗教般的争论。 Chrome扩展程序 ?...想知道某网站使用什么样的框架或者它承载了什么服务？这个照样管用。 React Dev Tools——一款用于调试应用程序的工具。有一点要提一下，它只有在你编写React程序时才有用。...Visual Studio Code是我写代码时的不二之选。每个人都有他自己喜欢的文本编辑器，我也不例外。不过，我还是想把这些扩展程序介绍给你，而它们对你所使用的大多数编辑器都适用。...如果你像大多数开发人员一样，你会发现自己需要在调试流中登录到控制台（我知道我们应该使用调试器）。这个实用的程序使得创建有用的console.log()语句变得易如反掌。

5867 0

vscode-前端插件

大家好，又见面了，我是你们的朋友全栈君。...vscode 通用插件中文主题标签主题格式化给括号加上不同的颜色, 方便区分代码块本地文件修改历史单词拼写检查 git 历史提交记录 GitLens 前端插件自动闭合HTML/XML标签...高亮自动完成另一侧标签的同步修改通过css选择器快速跳至css文件 open in browser 括号加上不同的颜色 Debugger for Chrome ESLint 智能提示CSS类名以及...”: “google chrome” 括号加上不同的颜色 Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 Debugger...for Chrome 映射vscode上的断点到chrome上，方便调试调试方式 ESLint js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置智能提示

1.7K2 0

VS Code 调试完全攻略（5）：基于浏览器的 React 应用

它超级强大，同时又很容易，所以在调试 CRA 和 React 程序时没有理由不这样做。 ? VS Code 调试完全攻略系列目录 ?...代码设置为了加快速度，我准备了一个简单的 React 应用，你要做的就是检出代码并启动 CRA 开发服务器： git clone git@github.com:thekarel/debug-anything.git...type：把调试器类型设置为 chrome，这意味着我们将在此配置中使用 Chrome 浏览器。...另一种可能性是 attach 到已经运行的调试服务器，这在当前的配置下是不可能的。最后，当你停止调试会话时，VS Code 会负责关闭 Chrome。...在这种情况下，要做的设置大致如下：启动开发服务器通过配置你的 launch.json 在调试浏览器中打开应用在源代码中设置断点当你需要反复检查同一属性时，可以设置监视表达式用 step 命令检查代码流

2.2K2 0

25 个提升开发幸福感的 VSCode 扩展

---- 为什么是 VSCode？ VSCode 可能是目前排名第一的代码编辑器，我喜欢它。...Visual Studio 代码中的集成终端下载地址[3] ---- 3. 代码对着色器 ? 图片对于大多数开发人员来说，处理括号是一种痛苦，尤其是在处理大型项目时。...由于有大量嵌套的长代码，尤其是在使用 Javascript 时，几乎不可能确定哪些括号彼此匹配。使用对 Bracket Pair Colorizer 可以帮助您更容易地找到开始和结束。...图片这个扩展是我生活中不可或缺的。相信我，这会节省你很多时间。我很健忘，作为一个拥有大量组件、扩展、包(特别是 React 格式)的前端开发人员，我需要一些东西来帮助我处理文件路径。...图片自从我开始使用 VSCode 以来，我一直在使用 Emmet。它可以帮助每个开发人员提高编写代码的速度。使用这个扩展，很快你就不能想象没有它的代码了。

4.5K2 0

调试工具的通用原理：调试四要素

有同学说，我用 VSCode Debugger 调试 Node.js，可以同时调试多个进程的代码。这是 Node.js 的调试。...有同学说，我用 React DevTools 和 Vue DevTools 的 chrome 插件来调试 React、Vue 组件，还会用独立的 React DevTools 调试 React Native...传输协议数据的方式叫做信道（message channel），有很多种，比如 Chrome DevTools 嵌入在 Chrome 里时，两者通过全局的函数通信；当 Chrome DevTools 远程调试某个目标的代码时...为了能直接用 Chrome DevTools 调试 Node.js 代码，Node.js 6 以上就使用 Chrome DevTools Protocol 作为调试协议了，所以 VSCode Debugger...Chrome 插件中可以访问网页的 DOM 的部分叫做 Content Script，随页面启动而生效，可以写一些操作 DOM 的逻辑。

2.3K2 0

【分享】每个 Web 开发者在 2021 年必须拥有 15 个 VSCode 扩展

为什么 VSCode 如此受欢迎 Visual Studio Code 在开发人员中迅速流行起来，它是最流行的开发环境，可定制性是其流行的原因之一。...当我们使用 TypeScript 时，这个扩展就派上用场了。它通过一个名为 “灯泡” 的功能对你的导入文件进行分类和组织，并修复编码错误。 4....itemName=msjsdiag.debugger-for-chrome 我们都知道有时候调试是多么烦人，所以这个扩展被用来帮助你调试 JavaScript 代码。它是由微软开发的。...itemName=CoenraadS.bracket-pair-colorizer 这个扩展允许匹配的括号被识别的颜色。当你在调试过程中处理一个巨大的代码库时，这个扩展就像救星一样。...当你想快速构建新项目时，这可能会有帮助。它没有键入全部代码，而是为最常见的 JavaScript 函数预定义了许多代码片段。它支持 TypeScript、React、Vue 和 HTML。

1.5K1 0

全网最优雅的 React 源码调试方式

我说，确实，我最开始也是调试的 react-dom.development.js，但是现在已经能直接调试 React 最初的源码了，而且是在 VSCode 里调试的，点击调用栈能直接打开对应的 React...sourcemap 的作用就是映射目标代码中的位置和源码中的位置。比如源码中的第 3 行第 5 列的代码对应着编译后的第 1 行第 10 列的代码。...path/to/your/sourcemap.map 调试工具支持解析 sourcemap 来映射调试的代码位置到源代码中的位置。...找到 rollup 的配置，添加一行 sourcemap: true，这个很容易理解，就是让 rollup 在构建时产生 sourcemap：再跑 npm run build，会报这样的错误：某个转换的插件没有生成...为什么呢？

1.5K2 0

VSCode 前端插件推荐

大家好，又见面了，我是你们的朋友全栈君。...开发综合推荐插件名：别名路径跳转使用说明: 别名路径跳转插件，支持任何项目，使用场景: 当你在开发页面时, 想点击别名路径导入的组件时（演示如下）配置说明下载后只需自定义配置一些自己常用的别名路径即可...常用于测试） Debugger for Chrome 插件名：Debugger for Chrome 功能：在VSCode端，调试代码 Svg Preview 插件名：Svg Preview...，很方便开发 React 开发推荐 React Style Helper 插件名：React Style Helper 功能：在React中更快速地编写内联样式，并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能...使用方法：选中行，Ctrl+Shift+p 输入翻译键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域功能：翻译识别代码中注释部分，不干扰阅读。

1.7K4 0

vscode 前端常用插件推荐「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。 1. vscode 简介 vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。...启动速度更快，打开各种大文件不卡。...个人推荐编写前端代码时，代码编辑器选择vscode，IDE选择WebStorm。...，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 　　映射vscode上的断点到chrome上，方便调试调试方法戳这 6.ESLint...(推荐) 　　js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置，日后我也会专门针对eslint配置写一篇文章。

1.8K1 0

React Native在Android当中实践（五）——常见问题

，然后打包才可以把新的index.android.js应用上，所以当没有index.android.bundle文件时，React-Native 项目是无法运行的。...，我还没有使用 RN 尝试过，不过想必显然是不太适合的。...js运行在桌面chrome中，通过websocket连接Native code和桌面chrome，极大地方便了调试。...点按操作也被抽象成了一组组件（TouchableXXX），这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因：实时的点按反馈和取消能力。...另外，React Native仍然很不完善。文档还不全，我基本上是看着他的示例代码完成的demo，集成到已有app的文档也是今天才出来。

2.3K2 0

作为JavaScript开发人员，这些必备的VS Code插件你都用过吗？

这里有一些工具，能极大地减少你开发时的这种重复流程，而不是每次都手动刷新浏览器： Debugger for Chrome：在编辑器中打断点，让你轻松地在Chrome里调试JavaScript。...框架类插件对于大多数项目，你会使用合适的框架去构建你的代码，以减少开发时间。VS Code通过插件对大多数主流框架都做了支持。然而，仍有一些特定框架没有得到完全的支持。...React Native Tools：为React Native框架提供代码智能提示、命令行工具和调试特性。 Vetur：为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。...ES Mocha Snippets：提供ES6语法的Mocha代码片段。这个插件的重点在于利用箭头函数，尽可能减少花括号的使用，保持代码的紧凑。可通过设置允许使用分号。...像ESLint这样的插件，帮助你避免代码中的常见错误；Debugger for Chrome，帮助你更容易地调试代码；带有智能提示的Node.js插件帮助你正确引用模块；像Live Server和REST

2.8K1 0

怎样通过读源码提高你的 JavaScript 知识

当我第一次看到 Mithril 的代码库时，对虚拟 DOM 的含义只有一个模糊的概念。当我读完时，就知道了虚拟 DOM 是一种技术，它涉及创建描述用户界面的对象树应该是什么样的。...如果没有对代码进行深入研究，我会正在处理的项目中打开 /node_modules 文件夹，或者转到 GitHub 存储库。当我遇到错误或有趣的功能时，通常会发生这种情况。...库和框架永远在持续更新，所以你不希望把精力花费在下一版本中可能会删除的内容。还有另一种阅读源代码的方式，我喜欢称之为“粗略一瞥”，这种方法并不那么简单。...虽然阅读源代码的结果不太可能立即就能用得上，但是能够使你对自己使用的库或框架的依赖关系有一个大致的了解，这是非常有用的。在调试前端代码时，浏览器的调试工具是你最好的朋友。...当我第一次阅读它的代码实现时，想知道为什么它没有用Object.prototype.toString.call（opts）！

9222 0

前端学习的编辑器介绍

第一种、Hbuilder编辑器，为什么我首先推荐呢，因为是国产，支持国产，人人有责！...4.Bracket Pair Colorizer (必备) 　　给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 　　...映射vscode上的断点到chrome上，方便调试 6.ESLint (推荐) 　　js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置，日后我也会专门针对eslint...Npm Intellisense(node必备) require 时的包提示好用的插件确实不少，综上这么多，我觉得是比较常用的，也是看了一篇大佬的文章摘抄过来的，至于怎么用，详细的介绍会在另外的文章里...至于vscode的使用方法有一些比较常用的快捷方式，在这里我也给大家拓展一下，因为我主要都是用mac来写代码的，所以我就写个mac电脑的操作快捷键位：全局 Command + Shift + P 显示命令面板

1.4K8 0

React Native调试技巧与心得

React Native旨在为开发者带来一个更好的开发体验。如果你觉得上文的加载js代码方式太low了或者不够方便，那么有没有一种更简便加载js代码的方式呢？答案是肯定的。...心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。...源码显示在单独的标签页，通过点击打开文件导航面板，导航栏中会显示所有已打开的脚本文件。心得：Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。...心得：你可以像使用Xcode/AndroidStudio调试Native应用一样，来使用Chrome开发者工具通过断点对程序进行调试。...另外需要提出的是这个功能在任意一行代码的边栏(gutter line)前单击右键都会看到。黑盒脚本(Blackbox scripts)：黑盒脚本会从你的调用堆栈中隐藏第三方代码。

6.7K5 0

React Native调试心得

在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。...React Native旨在为开发者带来一个更好的开发体验。如果你觉得上文的加载js代码方式太low了或者不够方便，那么有没有一种更简便加载js代码的方式呢？答案是肯定的。 ...心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。...源码显示在单独的标签页，通过点击打开文件导航面板，导航栏中会显示所有已打开的脚本文件。心得：Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。...另外需要提出的是这个功能在任意一行代码的边栏(gutter line)前单击右键都会看到。黑盒脚本(Blackbox scripts)：黑盒脚本会从你的调用堆栈中隐藏第三方代码。

5K7 0

这些必备的VSCode JavaScript插件你都用过吗？

在这之中可能有你已经知道并且正在使用的插件，但也很有可能有一些是你听说过但未曾使用过的，我也希望通过本文能为你简要的介绍一下这些插件。...这里有一些工具，能极大地减少你开发时的这种重复流程，而不是每次都手动刷新浏览器： 1. Debugger for Chrome（在编辑器中打断点，让你轻松地在Chrome里调试JavaScript。...框架类插件对于大多数项目，你会使用合适的框架去构建你的代码，以减少开发时间。VS Code通过插件对大多数主流框架都做了支持。然而，仍有一些特定框架没有得到完全的支持。...React Native Tools（为React Native框架提供代码智能提示、命令行工具和调试特性。）...ES Mocha Snippets（提供ES6语法的Mocha代码片段。这个插件的重点在于利用箭头函数，尽可能减少花括号的使用，保持代码的紧凑。可通过设置允许使用分号。）

5.7K1 0

玩转 Chrome DevTools，定制自己的调试工具

Chrome DevTools 是我们每天都用的工具，它可以查看元素、网络请求、断点调试 JS、分析性能问题等，是辅助开发的利器。今天不讲怎么使用它，而是讲一个好玩的方向：定制自己的调试工具。...上图中，UI 的部分叫做 frontend，解析网页、执行 JS 的部分叫做 backend。 backend 是集成在 Chrome 中的，但是 frontend 的部分是独立的。...我们可以从 npm 仓库下载 chrome-devtools-frontend 的代码，我这里用的是 1.0.672485 版本的： npm install chrome-devtools-frontend...我下载了 vivo 的快应用开发工具，它有编辑器、调试器、模拟器这几部分：模拟器渲染的内容能够在调试器里调试，这也是通过 WebSocket 通信的么？...比如 WebSocket 时的通信实现是这样的：而 electron 环境下是这样的：嵌入到一个环境的时候是这样的：这也是为什么文章最开始我说 Chrome DevTools 和 Chrome

3.4K3 0

高效开发软件——VSCode

Hello大家好，今天兔妞给大家带来的是一个好物分享——VSCode，这是兔妞经常用的一个软件，为什么介绍它，因为它是最受欢迎的开发环境，它免费！开源！轻量！快速！...Command + I 选中当前行 Command + Shift + L 选中所有与当前选中内容相同部分 Alt + Shift + 拖动鼠标选中代码块 Command + Shift + Option...3）Beautify：格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则 4）Bracket Pair Colorizer：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色...5）Debugger for Chrome：映射vscode上的断点到chrome上，方便调试 6）ESLint：js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint...，包括：Firefox，Chrome，Opera，IE以及Safari 15）Path Intellisense：自动提示文件路径，支持各种快速引入文件 16）React/Redux/react-router

1.1K2 0

2022，VSCode 前端插件推荐

效果展示路径别名智能提示插件名：path-alias 场景: 在导入组件的时候，使用别名路径没用提示时 (可和别名路径跳转同时使用, 无冲突) 安装效果和功能 indent-rainbow...for Chrome 功能：在VSCode端，调试代码 Live ServerPP 插件名：Live ServerPP 功能：在服务器端打开你的文件，实时显示你修改的代码支持websocket 消息服务...，很方便开发 React 开发推荐 React Style Helper 插件名：React Style Helper 功能：在React中更快速地编写内联样式，并对 CSS、LESS、SASS 等样式文件提供强大的辅助开发功能...ES7 Reactsnippets 插件名：ES7 React/Redux/React-Native/JS snippets 功能：很多React的代码段，很方便开发 vscode-styled-components...功能：翻译识别代码中注释部分，不干扰阅读。

1.1K1 0

VSCode打造成为开发神器

3.5 JavaScript/TypeScript 下面两个插件都为自动引入插件，只需要在文件中输入已经导出的函数名，就会自动添加引入代码！推荐使用！...minapp 3.9 其它 Bookmarks：可以在代码中设置书签。 Bracket Pair Colorizer 2：将不同的括号显示不同的颜色。...注：在开启该插件后，VSCode会有一个很长的文件搜索时间，不推荐使用。 koroFileHeader：在文件头部生成注释，并且能够一键生成函数JSDOC注释。...注：有时候会觉得自动生成比较烦，所以我暂时没有使用。 Live Sass Compiler：将Sass文件转换为CSS文件。...Debugger for Chrome：能够使VSCode在Chrome上面调试代码。 Debugger for Firefox：能够使VSCode在Firefox上面调试代码。

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭