在Chrome 中调试Javascript

在前面的两篇文章中我们讲了如何在IE中调试Javascript和在Visual Studio中调试Javascript，在本篇内容中，我们讲一下如何在谷歌 Chrome中调试Javascript。

Chrome 是Google 提供的一款非常优秀的浏览器，内置了开发者工具，可以方便我们对JS代码进行调试。有了使用IE来调试Javascript的经验，在使用Chrome进行调试的时候会变得很方便。

使用Chrome打开我们要调试的页面，然后使用快捷键F12打开开发者工具，当然，你也可以在工具菜单中找到。Chrome开发者工具如图：

Elements选项卡是对界面上的元素进行选择的，我们要进行调试的代码在Sources 选项卡中。

打开Sources选项卡，点击左侧的小箭头打开所有资源，选择我们的页面：

我们要调试这个页面的代码，所以就打开这个页面，然后点击行号可以添加断点：

点击界面中的按钮，我们能够捕获到刚添加的断点：

添加监视的方法和在IE中的方法是一样的：选中变量，在变量上面单击，选择“Add to watch”，如下图：

右侧的监视窗口中已经添加了对变量 a 的监视：

执行完成这句话以后，a的值将会发生变化：

Google Chrome 调试Javascript的快捷键：

F10：逐过程，即跳过该语句中的方法、表达式等

F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试

除了没有F9之外，这两个功能键的操作都是一样的。

如果要在Google Chrome中临时执行代码，需要在打开代码的控制台，在里面编辑和执行临时代码：

我们输入alert(a)，然后回车，界面上就会弹出一个提示框，如下图：

如果要停止调试，直接将开发者工具关闭即可。

本篇内容主要介绍了如何在Chrome中调试Javascript代码，如果你使用IE浏览器，请查看我们之前的两篇文章：

在IE中调试Javascript
在Visual Studio中调试Javascript
在Google Chrome中调试Javascript

from: http://www.qeefee.com/js/debug-javascript-in-chrome

在Chrome 中调试Javascript相关推荐

[译]如何在visual studio中调试Javascript
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
实现Chrome Devtools调试JavaScript V8引擎
摘要: 最近开发小程序JavaScript的运行时,通过在客户端嵌入JavaScript V8引擎来实现.前端同学需要调试JavaScript代码,正好Chrome浏览器的Devtools是与V8的I ...
Chrome 中的 JavaScript 断点设置和调试技巧
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...
如何在 Chrome 中执行 JavaScript 代码
前言要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持.现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium的 Edge 浏览器.下面来介绍如何在 Chrome 中打 ...
在浏览器中调试 JavaScript
文章目录 1.使用console.log() 2.使用调试器 3.设置断点参考文档在本教程中,您将借助示例了解 JavaScript 中的调试. 在编写程序时,您可能并且将会遇到错 ...
android chrome html,在桌面chrome中调试android设备中的web页面
准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装从http://developer ...
VS Code使用系列 -- 在浏览器中调试javascript（browser app）
环境安装插件1:Live Server 插件2:JavaScript Debugger 使用步骤 1,从状态栏启动Live Server(点击"Go Live") 如果状态栏被隐 ...
在 IE 中调试 JavaScript
简介虽然越来越多的用户转向使用 FireFox 等非 IE 内核浏览器,但是 Internet Explorer(IE, 6 以及后续版本 ) 仍然有着超过 50% 的市场占有率,大部分产品产品都需 ...
visualstudio调试html,Visual Studio Code中调试JavaScript
一.安装Debugger for Chrome扩展插件二.配置运行环境最左侧菜单找到调试(一个虫子样图标),点击下图中红色标注或者直接按F5: 然后出现下图所示: 选择Chrome,会生成Laun ...

在Chrome 中调试Javascript

在Chrome 中调试Javascript相关推荐

最新文章

热门文章