为了账号安全,请及时绑定邮箱和手机立即绑定
  • 不同浏览器开发工具的特色 FireFox:响应式模式设计,可以选择不同的手机分辨率,可以截图,模拟触摸事件。 Chrome:可以看到更多的性能信息,更多的资源信息,还有一些时间线的信息。 firefox:web控制台(有响应式模式设计,firebug没有);chrome:控制台(更多的性能信息,更多的资源信息,时间线信息);。。。最好的方式,是各种资源结合,使用它们最擅长最优秀的功能来助力web开发。
  • 进阶提示 1)不要放过所有可以点击的地方 2)不断地点击右键,收获惊喜 3)通过点击下拉菜单,发现有趣的功能 4)小甲虫所在的主菜单,扩展就在里面 小甲虫菜单-扩展、帮助、文档等 firebug也可以像chrome那样显示元素的状态信息,比如:hover,他藏在样式的下拉菜单里面 有几个非常不错的前端开发在线工具,分享给一起学习的小伙伴们,别忘了收藏,很实用。 (1)在线代码测试工具:http://www.lvyestudy.com/tools/run_code.aspx; (2)在线调色板:http://www.lvyestudy.com/tools/color_picker.aspx; (3)CSS3圆角生成器:http://www.lvyestudy.com/tools/border_radius.aspx
  • 毒龙 JS代码的调试:<br> 脚本:可查看JS代码,对其设置断点(点击左侧行号即可)<br> 方法:单步进入、单步退出、单步跳过、继续<br> 执行到断点处,切换到监控栏,可改变断点中相应的变量<br> 函数如何被调用:在代码处写入 console.trace();<br>//console.trace 概况栏:可进行简单的性能分析 console.log("%d年%d月%日",2015,3,30); console.group("第一组"); console.log("101"); console.group("第二组"); console.log("101"); console.time("test"); 运行 console.timeEnd("test"); 会输出运行时间 1、查看JS代码,设置断点(点击左侧行号即可) 2、调试js功能代码 F8:继续 F10:单步跳过 F11:单步进入 Shift+F11:单步退出 3、console.trace()可以知道函数如何被调用 点击概况 等待页面执行完毕 再次点击概况,就会…… 显示函数被调用时的一些参数信息 console.trace可以跟踪函数的调用情况,点击概况,可以查看性能,每个函数调用次数和每次调用花费的时间
  • http://www.jb51.net/article/56504.htm console.dir();显示对象的所有方法。 控制台日志和信息分组console.group;console.log().... console.groupEnd(); 在代码中向控制台输入一下代码,可以获得从控制台输出的相关信息。 console.log(); console.info(); console.debug(); console.warn(); console.error(); 4种占位符:%d %f %s %o;
  • FireBug调试器中“网络”控制面板的XHR: 对 html http request 的监听 通常所说的ajax监听 可以监听服务端响应的服务请求 XHR:监听ajax请求(如搜索提示)当服务器发送post或get请求时,它会监听这些请求,并在下面罗列出来,其中的参数就是我们请求的url或者post中的一些名字和字符;头信息是我们请求和回应的头信息;响应是实际中从服务器接收到的信息 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
  • 1、分类别的查看下载文件和http请求 2、可以查看http请示的详细信息,是否成功、是否缓存、请求参数、响应的结果等 3、缓存状态304 4、在调节宽度和高度这些数字值是可以使用键盘上下键来增加或者是减少,同时也可以通过shift+上下键 表示每按一下增加减少10 ctrl+上下键 表示每按一下增加减少0.1
  • 可用方向键进行微调字体, - 按住方向键,每次以1个单位调整。 - 按住Ctrl+方向键,每次以0.1个单位调整。 - 按照Shift+方向键 ,每次以10个单位调整。 右侧超链接,直接进入页面源代码修改
  • 1.快速定位网页元素:ctrl+shift+c 或 “小甲虫”旁边的屏幕箭头 2.快捷键设置:“小甲虫”下拉选项中的“自定义快捷键” 3.在HTML上上有若干节点,点击即可定位到相应节点
  • Firebug插件下载网址:http://www.getfirebug.com 在firefox浏览器中用F12打开,Ctrl+F12新窗口打开 适用于火狐的firebug,适用于其他浏览器的firebug lite
  • console.info()/debug()/warn()/error() //信息/调试/警告/错误 console.group()、console.groupEnd() //输出信息分组
  • (1)在线代码测试工具:http://www.lvyestudy.com/tools/run_code.aspx; (2)在线调色板:http://www.lvyestudy.com/tools/color_picker.aspx; (3)CSS3圆角生成器:http://www.lvyestudy.com/tools/border_radius.aspx
  • 看完了,收获很多,以前不懂的东西,以前模糊的东西,今天都明了啦,老师讲的真心不错,接下来就是多用的时候了。感谢感谢
  • jintiantianqihaibucuo,jiayou
  • firebug安装使用结合各个浏览器,

举报

0/150
提交
取消
课程须知
只要您对WEB开发感兴趣,想提高开发效果,赶快来学习本课程。
老师告诉你能学到什么?
运用Firebug 编辑HTML、处理CSS、调试Javascript、监听Ajax、评估页面速度等
意见反馈 邀请有奖 帮助中心 APP下载
官方微信