本文主要讲述以下几点内容： 设置断点以调试特定行的代码 查看调用堆栈 暂停/恢复脚本执行 设置表达式 开发工具的生产力提示和技巧 调试运行时代码 当代码出现 bug 或没有按照预期执行时，我们通常会查看开发者工具中的...虽然目前大多数浏览器中的内置开发工具，都允许您调试正在浏览的页面，停止在特定代码行上或者在特定语句上执行代码，但在本文中，我们将主要讲解 Chrome 开发者工具。 什么是断点？...在右侧面板中您可以使用 Return value 查看匿名函数的返回值。 ? 查看匿名函数返回值 临时取消断点 场景：您在代码中设置了一堆断点。 在调试时，多次刷新页面是很常见的操作。...取消断点 执行错误时停止 场景：您的代码执行产生了错误，但您不想设置断点，因为您不知道何时会抛出错误。 在您的代码中抛出错误，这样就可以查看代码出现了什么问题。 ?...有一个需要注意问题： 当我们使用断点进行调试时，监视表达式将被立刻执行，不需要刷新页面 如果代码在正常运行时，则需要手动单击刷新按钮 ? 监视表达式 结语 浏览器开发者工具是调试复杂代码的利器。
在JavaScript代码中设置断点 刚工作时被leader安利了Chrome浏览器，那时一说到调试，就知道这一个操作 以为在行号上单击一下就是打断点，就是会调试了:) 当然这也是最最基本的打断点的方式了...在JavaScript代码中设置条件断点 当知道了如何在行号上单击来添加断点，已经能满足最最最基本的调试了。 但如果遇到一些特殊情况，断点添加起来不是那么的舒服的时候要肿么办呢？...这是我们会看到界面上多出了一个输入框，并提示我们将在XXX行设置一个只会满足下列表达式的时候才会暂停的断点-.- ?...异常断点 当代码出现异常时，我们会在Console页签看到错误提醒，并可以通过后边的锚点找到对应的文件以及定位到出错的代码行。 ?...但是这时代码已经抛出了异常，我们可以通过设置异常断点，在抛出异常前进入断点进行调试。 点击debugger上边的的这个小图标，就可以设置在程序抛出异常时进入断点。（灰色为禁用-.
开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。...跳入(Step into): 与 Step over 类似，但是当代码调用函数时，调试器会进去这个函数并跳转到函数的第一行。...断点其实很简单 断点(Breakpoint) 是在脚本中设置好的暂停处。在DevTools中使用断点可以调试JavaScript代码，DOM更新和 network calls。...添加和移除断点 在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试，点击边栏(line gutter) 为当前行设置一个断点，已经设置的断点处会有一个蓝色的标签，单击蓝色标签...如果勾选上此功能，则即使所发生运行时异常的代码在 try/catch 范围内，Chrome 开发者工具也能够在错误代码处停住。 ?
调试（Debug）在维基百科上的定义是：是发现和减少计算机程序或电子仪器设备中程序错误的一个过程。 多数时候，调试是为了找到代码中的错误，并具体定位到错误的地方。...幸运的是，现在的前端框架都比较人性化了，可以和大部分的后台框架一样，提示代码中出错的地方。这时，我们只需要借助于浏览器的调试，找到错误的行数，并查看错误的原因。...有些时候，我们调试是为下一步编程，提供一些理论依据。如在应用运行的时候，我们可以使用浏览器打个断点，并在 Console 中输入代码调试下一步要做的事。...实时调试样式 作为一个有经验的前端程序员，当我们开发前端界面时，都会： 在浏览器上编写 CSS 和 HTML 将编写好的 CSS 和 HTML 复制到代码中 重新加载页面，看修改完的页面是否正确 如果不正确...只需要在浏览器的相就部分打个断点，再执行相应的操作，就可以等代码掉到这个坑里。如下是 Chrome 浏览器进行代码调试时的截图： ? 从工具栏中的 Sources 就可以进行到这个界面。
，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上 类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐渐变化或增长，这里理解为状态，在交互过程中...，因为某些原因需要临时离开交互场景，则需要对状态进行保存 在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中，当用户从详情页退回列表页时...，我们需要研究如何自动保存状态 最初的版本react-keep-alive image.png 1500行TypeScript代码在React中实现组件keep-alive 我的这篇文章对源码进行了解析...组件，导致数据驱动可以进行组件刷新 这又印证了那句话 在计算机的世界里，如果出现解决不了的问题，那就加一个中间层，如果还不行就加两个 --来自不知名码农Peter image.png 这里按照代码运行逻辑...，完整的解析了它的简单缓存机制实现，思路整体比较清晰，加上代码自己断点调试难度应该比较低，个人觉得这个库的设计和思想，都是不错的，值得推广，作者也是比较乐意解答问题。
因此，断点调试对于快速定位代码错误，快速了解代码的执行过程有着非常重要的作用，这也是我们前端开发者必不可少的一个高级技能。...二、认识断点调试工具 在尽量新版本的chrome浏览器中（不确定你用的老版本与我的一致），调出chrome浏览器的开发者工具。 界面如图。...三、断点设置 在显示代码行数的地方点击，即可设置一个断点。断点设置有以下几个特点： 1、在单独的变量声明(如果没有赋值)，函数声明的那一行，无法设置断点。...2、设置断点后刷新页面，JavaScript代码会执行到断点位置处暂停执行，然后我们就可以使用上边介绍过的几个操作开始调试了。...这是来自《你不知道的js》中的一个例子。由于在使用断点调试过程中，发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致，因此专门挑出来，供大家参考。我个人更加倾向于chrome中的理解。
首先，从 DevTools 菜单中的 More tools 子菜单中打开 Coverage 。重新加载页面，面板将用条形图显示未使用代码的百分比： ?...单击任何 JavaScript 文件，未使用的代码会用红条突出显示。 5. 找到DOM更改代码 当事件被触发时，很难确定哪个函数负责更新特定的 HTML DOM 元素。...在 Chrome DevTools Sources 面板中，打开一个文件，右键单击代码中的某个位置，然后选择添加脚本以忽略列表。...使用条件断点 单击 Sources 面板中打开的文件的行号会添加一个断点。它会在执行到这一行的时候暂停脚本，这样你可以单步执行代码来检查变量，调用堆栈等。...可以在 Chrome 中或使用任何代码编辑器来编辑文件，每当重新加载页面时，都将使用更新的版本。 14. 管理客户端存储 网页可以使用多种技术将数据存储在客户端上。
一、调试安卓应用 在进行混合应用开发过程中，经常需要在安卓应用中调试 H5 项目的代码，这里我们就需要了解安卓应用如何在 Chrome 上进行调试。...Chrome 启动调试页面 在 Chrome 浏览器访问“chrome://inspect/#devices”，然后在 WebView 列表中选择你要调试的页面，点击“ Inspect ”选项，跟调试...三、快速断点报错信息 在 Sources 面板中，我们可以开启异常自动断点的开关，当我们代码抛出异常，会自动在抛出异常的地方断点，能帮助我们快速定位到错误信息，并提供完整的错误信息的方法调用栈。 ?...四、断点时修改代码 在 Sources 面板中，我们可以在需要断点的行数右击，选择“Add conditional breakpoint”，然后在输入框中输入表达式（如赋值操作等），后面代码将使用该结果...使用场景： 需要在调试时，方便手动修改数据来完成后续调试的时候。 使用方式： 在 Sources 面板中，在需要断点的行数右击，选择“Add conditional breakpoint”。 ?
在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。 ---- JavaScript 调试 没有调试工具是很难去编写 JavaScript 程序的。...你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。 通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。...通常，你在编写一个新的 JavaScript 代码过程中都会发生错误。 ---- JavaScript 调试工具 在程序代码中寻找错误叫做代码调试。...b; console.log(c); 设置断点 在调试窗口中，你可以设置 JavaScript 代码的断点。...---- debugger 关键字 debugger 关键字用于停止执行 JavaScript，并调用调试函数。 这个关键字与在调试工具中设置断点的效果是一样的。
既然我们要做 JavaScript 逆向，那少不了要用到浏览器的开发者工具，因为网页是在浏览器中加载的，所以多数的调试过程也是在浏览器中完成的。 工欲善其事，必先利其器。...在调试代码的时候，我们可以在需要的位置上打断点，当对应事件触发时，浏览器就会自动停在断点的位置等待调试，此时我们可以选择单步调试，在面板中观察调用栈、变量值，以更好地追踪对应位置的执行逻辑。...断点被触发 这时候我们可以看到页面中显示了一个叫作 Paused in debugger 的提示，这说明浏览器执行到刚才我们设置断点的位置处就不再继续执行了，等待我们发号施令执行调试。...调试到某处，想要加一行 console.log 输出一些内容，以便观察某个变量或方法在页面加载过程中的调用情况。在某些情况下，这种方法比打断点调试更方便。...在 JavaScript 文件中写入一行 JavaScript 代码 这时候可以发现 JavaScript 文件上出现了一个感叹号标志，提示我们做的更改是不会保存的。
Chrome 调试工具 Chrome 开发工具 谷歌 Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。...注：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内。 Chrome调试小技巧 Sources面板 Sources 面板提供了调试 JavaScript 代码的功能。...跳入(Step into): 与 Step over 类似，但是当代码调用函数时，调试器会进去这个函数并跳转到函数的第一行。...断点Breakpoint 断点(Breakpoint) 是在脚本中设置好的暂停处。在DevTools中使用断点可以调试JavaScript代码，DOM更新和 network calls。...如果勾选上此功能，则即使所发生运行时异常的代码在 try/catch 范围内，Chrome 开发者工具也能够在错误代码处停住。 ?
以谷歌浏览器（版本为69）为例，编辑器为VSCode（版本1.26.1） 断点方式一 这种方式是比较常用的方式，在浏览器开发工具找到对应源码，在script脚本节点里面的代码行断点。 ?...只要找到源码，在脚本代码显示区域左边的数字上添加断点即可，之后只要代码运行到断点处，开发工具就会进入调试状态。 注意：有的数字行是灰色的，就是不可断点。...有时候点击15行断点选中14行，这是因为浏览器真正执行的代码行不是你看到的那一行，可能是优化掉了或者经过某种转换。...在Chrome和VS Code中调试Vue.js：此方法出处。这种方式使用VSCode的“Debugger for Chrome”扩展，推荐。...远程调试Chrome 附加浏览器的方式，不同于上一种，修改代码后要刷新页面才能重新断点调试 待更新 断点方式四 这种方式归为调试nodejs,可以调试webpack配置，或者后端运行的node实例。
因此，断点调试对于快速定位代码错误，以及快速了解代码的执行过程有着非常重要的作用，这也是我们前端开发必不可少的一个高级技能。...二、认识断点调试工具 在尽量新版本的chrome浏览器中（不确定你用的版本与我的一致），调出chrome浏览器的开发者工具。...三、断点设置 在显示代码行数的地方点击，即可设置一个断点。断点设置有以下几个特点： •在单独的变量声明(如果没有赋值)，函数声明的那一行，无法设置断点。...•设置断点后刷新页面，JavaScript代码会执行到断点位置处暂停执行，然后我们就可以使用上边介绍过的几个操作开始调试了。...这是来自《你不知道的js》中的一个例子。由于在使用断点调试过程中，发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致，因此专门挑出来，供大家参考。我个人更加倾向于chrome中的理解。
尽管江湖传言 JavaScript 很难调试，但如果你掌握了几个技巧，就能用很少的时间来解决错误和bug....文中已经列出了14个你可能不知道的调试技巧，但是可能需要你牢记在心，以便在下次需要调试JavaScript代码时使用！...快速查找要调试的函数 假设你要在函数中打断点，最常用的两种方式是： 在控制台查找行并添加断点 在代码中添加 在这两个解决方案中，您必须在文件中单击以调试特定行。 使用控制台打断点可能不太常见。...在调试JavaScript时，可以使用CSS并自定义控制台信息： 输出： 例如： 在中， 可以用设置字符串，设置数字，设置自定义样式等等，还有很多更好的使用方法。...但打开一个新的窗口，写入请求对象，然后再来测试它们，显得很麻烦。 有时使用浏览器更容易。 当你使用浏览器查看时，如果请求一个密码验证页面，不需要担心身份验证的cookie。
style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后...Sources资源页面的断点调试 1.如何调试： 调试js代码，肯定是我们常用的功能，那么如何打断点，找到要调试的文件，然后在内容源代码左侧的代码标记行处点击即可打上一个断点 image 2.断点与 js...下面是各种具体的功能区 image 在代码中打断点 在当前的代码执行区域，在调试中如果发现需要修改的地方，也是可以立即修改的，修改后保存即可生效，这样就免去了再到代码中去书写，再刷新回看了 image...会走很多底层的封装方法，需要很多步骤才能真正进入这个函数块，此时将鼠标放在此函数上，会出现相关提示，会告诉你在该文件的哪一行代码处，点击即可直接看到这个函数，然后临时打上断点，按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处...勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断。 4.
如果看一下 get-started.js 中的代码，您会发现错误多半出在 updateLabel() 函数的某处。 您可以使用另一种断点来暂停较接近极可能出错位置的代码，而不是单步调试每一行代码。...XHR 当 XHR 网址包含字符串模式时。 事件侦听器 在触发 click 等事件后运行的代码中。 异常 在引发已捕获或未捕获异常的代码行中。 函数 任何时候调用特定函数时。...代码行断点 在知道需要调查的确切代码区域时，可以使用代码行断点。 DevTools 始终会在执行此代码行之前暂停。 在 DevTools 中设置代码行断点： 点击 Sources 标签。...例如，在您发现您的页面请求的是错误网址，并且您想要快速找到导致错误请求的 AJAX 或 Fetch 源代码时，这类断点很有用。 若要设置 XHR 断点： 点击 Sources 标签。...额外的调试技巧 我们在调试一些 hover 属性的时候，往往想要调整 hover 后显示的元素，但是每当我们移到观察此元素的时候就会消失。这使得调试非常不方便。
) iPhone 使用 Safari 浏览器打开要调试的页面 Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面) 在弹出的 Safari...手机进入开发者模式，勾选 USB 调试，并允许调试 电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices...四、常用调试技巧线上即时修改我们平时在 Source 面板在线修改调试代码，会实时更新效果，但浏览器一刷新之前修改的全部恢复原样，这样子调试代码效率就很低，只能浏览器调试改点，代码跟着改点很麻烦。...允许授权 在 page 中修改代码，修改完成后 command + s 保存。...Overrides、Charles 配置 Map Local移动端问题排查：使用代理抓包工具（Charles、Fiddler...）隐藏深的问题排查：小黄鸭调试大法（一行行挨着读代码，梳理清楚代码逻辑
Google Chrome 的开发人员工具中有多种功能和工具可供开发人员直接在浏览器中编辑代码、测试和添加断点以检测问题，并更有效地调试代码。...在控制台中调用debug(functionReference)会增加一个调试器；引用函数声明的第一行上的语句。 DevTools 还提供断点，让你逐行执行代码。...调试期间重启帧 借助 Chrome 新添加的 DevTools Restart Frame 功能，你可以在调试函数时遇到断点后重新运行前面的代码。...代码片段 在调试时，你可能经常需要一遍又一遍地执行同一行代码，直到你完成故障排除。但是，这会导致你进行大量重复输入或不断地从你最喜欢的代码编辑器复制并粘贴到你的 Chrome 浏览器控制台。...创建的代码片段可以在任何时候在任何网站上的每个调试会话中通过单击按钮来执行，因为它会永久保存，直到手动删除。这可以节省你在每个页面测试中输入重复信息的时间。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
