首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 Chrome DevTools 调试 JavaScript

学会在 Chrome Developer Tools 中使用断点来调试代码。 作为一名新的开发人员,发现和修复 bug 挺难的。...这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。...本教程将向您展示如何调试一个具体 bug,您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。 步骤 1:重现错误 重现错误是调试的第一步。...编译自:https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db 作者: Brandon...Morelli 译者: 众里寻他千百度 转载自:http://www.zcfy.cc/article/learn-how-to-debug-javascript-with-chrome-devtools-codeburst

2.4K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用 Chrome DevTools 调试 JavaScript

    您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 bug 的方法。...本教程将向您展示如何调试一个具体 bug,您学到的方法将有助于您调试以后遇到的的 JavaScript 错误。 步骤 1:重现错误 重现错误是调试的第一步。...您可以在 Watch 表达式中存储任何有效的 JavaScript 表达式。现在就试试: 在 Sources 面板, 点击 Watch。 点击 Add Expression 按钮 ? 。...可以使用控制台来评估任意的 JavaScript 语句。开发人员通常使用控制台在调试时覆盖变量值。在您的情况下,控制台可以帮助找到啊修复 bug 的方法。...您可以直接在 DevTools UI 中编辑 JavaScript 代码。

    1.8K10

    在 Chrome DevTools 中调试 JavaScript

    函数断点 由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript。 一、案发现场 为了方便理解,我写了一个小demo。...二、熟悉一下 Sources 面板 DevTools 可为更改 CSS、分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具。 我们就在 Sources 面板中调试 JavaScript。...此处列出页面请求的每个文件。 代码编辑 窗口。 在 文件预览 窗口中选择文件后,此处会显示该文件的具体内容。 JavaScript 调试 窗口。 包含检查页面 JavaScript 的各种工具。...Watch监听变量变化 Watch 标签可监视变量值随时间变化的情况。 并且,监视不仅限于监视变量。 我们可以将任何有效的 JavaScript 表达式存储在监视表达式中。...控制台 控制台除了查看 console.log() 消息以外,还可以使用控制台对任意 JavaScript 语句求值。

    5K20

    使用HTML,CSS和JavaScript创建Chrome扩展程序

    介绍 谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了Google Chrome浏览器,它可以帮助我同步书签,浏览器历史记录,密码管理器等等。...您可以测试您的网页和全部。通过使用扩展程序,谷歌浏览器变得更加强大。 因此,今天,我们将研究如何使用HTML,CSS和JavaScript创建您的第一个Google Chrome扩展程序。...设置 要求 Chrome扩展入门的要求很少。...列表在这里: Google Chrome扩展程序(用于测试) 文本编辑器(我更喜欢VS Code,您可以根据需要使用其他编辑器) 有关HTML,CSS和JavaScript的基础知识 Chrome扩展程序...我们将为第一个Chrome扩展程序开发一个计算器应用程序。

    1.9K20

    初探 利用 javascript 开发 Chrome 浏览器插件

    初探 利用 javascript 开发 Chrome 浏览器插件 前言 这几天运维组的小伙伴正在给新开发的一个商城录入一些数据。其中图片不是很好找,于是,在某个B2C网站下载图片。...主要是要下载放大镜中的那几组图片。 所有女生都大声尖叫,这活儿不是人干的……于是,技术组老大临时任命我开发一个 chrome 插件来帮助他们解决这个问题。...硬着头皮上吧~ 技术原理分析 搞明白chrome 插件是怎么开发的 搞明白 这个网站的图片的特征是啥 技术可行性分析 网站图片规则 放大镜中的图片,都在一个列表里,其中,还有一个特征,就是包含src-large...Chrome 浏览器插件原理 首先,这个插件要先对页面分析,得到上面所需要的所有图片的URL 其次,要对这些URL进行处理,得到能用的格式。 最后,把这些图片全部下载下来。...chrome.browserAction.onClicked.addListener(function(tab) { // 对当前页面进行执行 chrome.tabs.executeScript

    89210

    Chrome - JavaScript调试技巧总结(浏览器调试JS)

    Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试。...为方便大家学习和使用,本文我对 Chrome 的调试技巧做个系统的总结。...但如果后台返回的是没有格式化的 JSON 数据,查看起来会异常痛苦 ? (2)我们可以通过 chrome 控制台的 copy 接口来实现 JSON 数据的格式化。...(3)Snippets 的方便之处在于,我们只需要打开 Chrome 就可以编写一份任意页面都可以运行的JS代码 2,使用样例 (1)点击“New Snippet”按钮,创建一个新的片段文件 ?...九、Async 调试   Chrome 调试器的 Async 模式是为调试异步函数所设计一个功能 1,测试代码 下面是一段使用 Promise 的代码: //做饭 function cook(){

    25.1K43

    N年前的旧代码,爆炸

    最近刚接到的任务是要在官网商城PC版上面添加一些功能。第一次体会到糟糕的代码是多么的可怕。不论是从项目结构,还是代码风格,经历了“几代人”的“锤炼”,早已风化腐朽多时。...由于历史原因,整个PC站点是由Nginx拼装的html页面,Js也是由Nginx合并后的,杂乱的各种命名,年久失修的公共库。...以及一个09年的弹框插件,据说是从一号店那边过来的,好在此人留下了QQ号,已经33岁了。。。 兼容性的代码,以及很多hack。...现在看来最大的坑是用的jsp模板渲染,函数调用都是直接写在DOM结构中,onclick事件触发。...到了今天,老代码不敢动,新代码只能不断的往上加,难以想象越是到后面会怎么样,每个刚接触的人都需要花费时间来阅读理解这些东西,后面的人更是不想接,这坑可真是大。eval,混乱的压缩,都是不规范导致的。

    30520

    JavaScript深入浅出第5课:Chrome是如何成功的?

    摘要: Chrome改变世界。 前言 在上一篇博客中,我聊了一下JavaScript引擎V8的工作原理,顺其自然,接下来应该来聊聊渲染引擎Blink或者Chrome浏览器的工作原理。...几乎所有JavaScript开发者每天都在使用Chrome,大家知道它是如何成为浏览器霸主的吗? Google为什么要做浏览器?...合并地址栏和搜索框,隐藏书签栏,这样做不只是让用户界面更加简洁,还可以培养用户的搜索习惯,让用户不在需要记住特定的网站。...JavaScript引擎V8 Chrome的性能优异,很大程度上要归功于他们的重新的开发的JavaScript引擎V8。...JavaScript深入浅出第3课:什么是垃圾回收算法? V8引擎不只是让Chrome变快,它也让JavaScript变得更加强大,让JavaScript生态系统变得异常繁荣。

    59040

    25个必须记住的SSH命令

    telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃听,连接劫持和其它攻击。...此外,OpenSSH提供了安全隧道功能和多种身份验证方法,支持SSH协议的所有版本。 SSH是一个非常伟大的工具,如果你要在互联网上远程连接到服务器,那么SSH无疑是最佳的候选。...下面是通过网络投票选出的25个最佳SSH命令,你必须牢记于心。 (注:有些内容较长的命令,在本文中会显示为截断的状态。如果你需要阅读完整的命令,可以把整行复制到您的记事本当中阅读。)...15、删除文本文件中的一行,修复“SSH主机密钥更改”的警告 sed -i 8d ~/.ssh/known_hosts 16、从一台没有SSH-COPY-ID命令的主机将你的SSH公钥复制到服务器...xclip可以帮到你,它可以将标准输入复制到X11缓冲区,你需要做的就是点击鼠标中键粘贴缓冲区中的内容。 好啦,今天的分享到这里就结束了,如果需要更多的技术性文章,可以访问马哥教育官网!

    1.4K20

    25个必须记住的SSH命令

    telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃听,连接劫持和其它攻击。...此外,OpenSSH提供了安全隧道功能和多种身份验证方法,支持SSH协议的所有版本。 SSH是一个非常伟大的工具,如果你要在互联网上远程连接到服务器,那么SSH无疑是最佳的候选。...下面是通过网络投票选出的25个最佳SSH命令,你必须牢记于心。 (注:有些内容较长的命令,在本文中会显示为截断的状态。如果你需要阅读完整的命令,可以把整行复制到您的记事本当中阅读。)...SSH目标计算机的扬声器端口输出,但遗憾的是,声音质量很差,你会听到很多嘶嘶声。...15、删除文本文件中的一行,修复“SSH主机密钥更改”的警告 sed -i 8d ~/.ssh/known_hosts 16、从一台没有SSH-COPY-ID命令的主机将你的SSH公钥复制到服务器

    2.1K50
    领券