Google Chrome 调试JS简单教程[更新]

题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章。最近更新时间2014-02-14 chrome版本: 32.0.1700.107 m

我是一名忠实Chrome迷,使用它已经快有2年的历史了,整体给我的感觉就是清爽,快速,简洁。又打小广告了……^_^,虽然我知道IE8+也有调试工具,包括火狐的什么XXBUG,但是我用过之后,个人还是十分偏爱chrome的debug。

chrome对于在前端打拼的兄弟姐妹是十分有帮助的,它优雅的实时展示DOM,捕获N个ajax传递过来的参数

查看动态DOM

获取ajax请求数据预览

包括chrome中N多插件……

当然我在这里列举一个十分有用的javascript调试的技巧

首先请打开“谷歌浏览器”(废话),然后打开一个网页,按“F12”会出现一个控制台,找到一个叫做“Sources”,点击它

OK,如果你的页面现在已经加载过JS脚本的话,那么应该可以看到一些JS文件了

然后你可以在左侧侧栏的序号那些位置点击一下就设置成断点,当你要执行某个函数的时候浏览器就会自动进入调试模式了

细心的你肯定会发现Scope Variables区域显示的竟然就是Object对象的元素,大惊。起初我们要想展示一个对象要么采用


1

2

3

4

5

function forIn(o) {

    for (i in o) {

        document.write(‘<strong>‘ + i + ‘ --></strong> ‘ + o[i] + ‘<br />‘);

    }

}

你会发现页面很麻烦,而且也不是很灵活,现在学会chrome的debug工具我相信会给你带来莫大的帮助了。

==2013-11-02更新==

当我们在打开chrome的时候,你就已经被google至简给深深吸引,到现在chrome的版本已经到了 30.0.1599.101 m,google的东西确实很赞。

好滴,我补充一些我后来慢慢用到的内容给大家,算是我自己的工作笔记吧。

一般我们打开的大部分的网站有些js文件是已经被yui\uglifyjs等js压缩工具压缩过的代码,让你看格式来进行调试十分不容易(根本就不可能)。chrome中也提供了一个格式化代码的功能。

点击图上圈红(pretty print)的按钮立即将当前文件进行标准格式了。我啰嗦一句,这个格式化代码目前我只知道能格式化dom和js,css文件没有格式化效果当然也就不支持了。

关于js调试的几个控制简介

js控制面板就是在顶部的侧面板,这几个工具条可以让你按步执行代码。

继续:继续执行代码,直到我们遇到另一个断点。

步骤:忽略方法体内部,也就是不进入到方法体内部细节再执行,只调用取返回值继续在当前执行下步。

进入细节:细节逐语句执行,进入方法体再执行。

退出细节:细节语句返回主函数体。

断点开关:决定该断点是否开启/关闭。

上面这些内容只是一些粗略的手记,如果你需要更加深入的了解chrome的DevTools不妨来这里,这里绝对是一手资料而且十分详细和权威,如果你有幸被墙,那么恭喜你,你要学会怎么搭建梯子,这个问题你可以google或者度百。

出处:http://www.markdream.com/code/chrome-google-js-debug.shtml

Google Chrome 调试JS简单教程[更新]

时间: 2024-10-07 09:14:16

Google Chrome 调试JS简单教程[更新]的相关文章

Google Chrome调试js入门

1 我们要调的json数据见下图,这里不涉及和后台的交互. 2 我们在chrome中打开开发者工具,打开方式如下图,我们也可以使用快捷键F12来打开.选择我们要调试的文件,相信你能找到,^_^. 3 设置断点的设置,我在11行设置了断点,设置方法左侧点击即可,我太喜欢这个断点了,看起来真漂亮.刷新一下页面,执行如下图: 4 在向下执行之前,我们直接输入json(我们的对象名),看看对象结构,可以非常清晰的看到json到底是个什么东西,不用太多的解释,如下图: 5 按F10向下执行,我们依次输入我

Google Chrome调试js代码

你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript  断点设置 和 调试 功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclip

Google Chrome调试js

1. 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12. 参考资料: http://www.cnblogs.com/moonvan/archive/2011/12/09/2282710.html http://jingyan.baidu.com/article/e9fb46e19c8b167521f766f9.html

Google Chrome 调试

[原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现在的FireFox4也比之前的FireFox3有很大的进步).不过

chrome调试js方法

版本:40.0.2214.94 m 首先按ctrl+shift+j,出现调试界面. 点击sources,看见js的源代码: 点击行号,你想断点的位置: 点击界面,会进入断点,F10是下一行,或者右侧的向下/向上箭头按钮: 点击+号,可以增加变量,查看变量的值(其实用鼠标扫一下变量,把鼠标放在上面也能看). chrome的js调试非常好用!免掉了我以前alert来调试的坏习惯,快速解决了很多问题,个人感觉比ie的调试好用. 2015.3.3

google chrome 调试技巧:监控 DOM 元素被修改

在很多时候, 页面上一个元素的属于被修改.删除,子节点的添加与修改,很难一下找到对应的代码,在 google chrome 开发者工具里, 提供了对 DOM 元素的监控: 在 Elements 标签, 右击有监控的元素,在弹出来的菜单中有一个 Break on 的菜单项, 下面有三个子菜单项 subtree modifcations: 监控当前元素子级元素结构的变化,添加结点和删除节点,移动节点不知道算不算. attribute modifcations: 监控当前元素属性的变化. node r

google chrome调试

1,同样的代码使用firefox运行不会报错,正常运行. 2,同样的代码使用google chrome 有时候会误报网页? 如下:代码可以在 firfox edge正常运行,在chrome  opera 运行报错.应该是兼容性问题. 代码: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document&l

fullpage.js简单教程(一)

最近准备做一个全屏滚动的网页,在网上搜了一堆教程,结果大多都是一些很笼统的使用方法,对我这种耐心不超过3秒的笨蛋来说,很晦涩很笼统,所以打算边研究边自己写个教程,有什么不懂的,我再回来翻看笔记也方便O(∩_∩)O哈哈~ 经常看到一些全屏网站,看着就很高端大气上档次,想实际操作的话,可以试着使用fullpage.js这个基于jquery的插件,轻量又很方便. 功能: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整

fullpage.js简单教程(二)

做全屏滚动网页,实现滚动效果后,首先想到的就是网页右边的导航栏,要实现这个导航栏,fullpage.js插件本身就自带配置项,只要会使用就可以实现效果了. 先介绍几个api: anchors:定义锚链接,默认值为[],有了锚链接,就可以快速的打开定位到某一页面,也是我们实现导航栏的关键: lockAnchors:是否锁定锚链接,默认为false,如果设定为true,定义的锚链接,也就是anchors属性就没有效果了: menu:绑定菜单,设定相关属性与anchors的值相对应后,菜单可以控制滚动