10分钟学会前端调试利器——FireBug

2015/09/17 · HTML5,
JavaScript · 1
评论 ·
调试

原稿出处:
惟吾德馨(@Allen_Bryant)   

作者:惟吾德馨‘
原文地址:http://www.cnblogs.com/allenben/p/4757274.html

http://www.cnblogs.com/allenben/p/4757274.html

那里记录一下踩过的坑

事先看的这些地点:
也就是 BrowserSync的官网上边关于代理服务器的例证不管怎么试都相当

请看下例子

browser-sync start --proxy "主机名" "css/*.css"
而实际上不管怎么试都不行在git bash here 和cmd 中试了一下结果是都不行,具体情况是可以将本地服务器的地址代理到localhost:3000或者localhost:3001但是一直不能实时刷新修改的文件
后来在网上不断的搜索,试了一下这段代码,突然就可以了
具体代码如下
【之前的代码】能将本地服务器代理到localhost:3001/localhsot:3000,但是不能实时刷新

   browser-sync start –proxy “localhost:8080/whale/”  “layouts/*ca88电脑客户端:10分钟学会前端调试利器,前端调试利器。.css” 

ca88电脑客户端, 

 
【改过之后的代码】能将地点服务器代理到localhost:3001/localhost:3000,且能实时刷新修改的代码

 
 browser-sync start –proxy “localhost:8080/whale/” –files “layouts/*.css” 

效果图如下
git bash here


cmd


保存时

概述

  FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩大插件。它可以用于调试JavaScript、查看DOM、分析CSS、监控网络流量以及开展Ajax交互等。它提供了大致前端开发须求的全套效益。官方网站:www.getfirebug.com

何以赢得Firebug?

因为它是Firefox浏览器的一个恢弘插件,所以首先要求下载Firefox浏览器。读者可以访问www.mozilla.com下载并设置Firefox浏览器。安装到位后用它访问

进入下图所示页面。点击”添加到Firefox”,然后点击”立时安装”,最终再一次启航Firefox浏览器即可完结安装。

ca88电脑客户端 1

ca88电脑客户端 2

转载地址:请戳那里

主面板

设置到位未来,在Firefox浏览器的地点后方就会有一个小虫子的图标ca88电脑客户端 3。单击该图标后即可进行Firebug的控制台,也得以由此火速键<F12>来开辟控制台。使用Ctrl+F12快速键可以使Firebug独立打开一个窗口而不占用Firefox页面底部的空间。

ca88电脑客户端 4

从上图中得以见到,Firebug包含7个面板:

操纵台面板:用于记录日志、概览、错误提示和执行命令行,同时也用于Ajax的调试;

HTML面板:用于查看HTML成分,可以实时地编辑HTML和改动CSS样式,它包蕴3个子面板,分别是样式、布局和DOM面板;

CSS面板:用于查看所有页面上的CSS文件,可以动态地修改CSS样式,由于HTML面板中一度包罗了一个CSS面板,因而该面板将很少用到;

剧本面板:用于展现Javascript文件及其所在的页面,也可以用来彰显Javascript的Debug调试,包括3个子面板,分别是监控、堆栈和断点;

DOM面板:用于浮现页面上的所有目标;

互连网面板:用于监视网络移动,可以协助查看一个页面的载入情状,包括文件下载所占据的光阴和文件下载出错等音信,也足以用来监视Ajax行为;

Cookies面板:用于查看和调动cookie(需求安装下文资源中所提到的Firecookie)。


 

概述

FireBug是一个用以网站前端开发的工具,它是FireFox浏览器的一个增添插件。它可以用来调试JavaScript、查看DOM、分析CSS、监控互连网流量以及开展Ajax交互等。它提供了大约前端开发要求的万事效果。

官方网站:www.getfirebug.com

BrowserSync,调试利器–自动刷新

时间:2015-06-02 17:18:17     
阅读:9726      评论:0      收藏:0      [点自身收藏+]

标签:

—復苏内容开端—

请想象那样一个外场:你开着五个显示屏,一边是IDE里的代码,另一面是浏览器里的您正在开发的应用。此时桌上还放着你的手机,手机里也是以此开发中的应用。然后,你新写了一小段代码,按下了ctrl+s封存。紧接着,你的手机和另一个显示屏里的应用,就变成了翻新后的成效。你可以及时检查作用是或不是和您预想的同等,甚至都不需求动一下鼠标…

想起来还不易?嗯,那只是简不难单地省略掉那些开发进度中会按好多遍的F5刷新。

  控制台面板

1.说了算台面板概览

此面板可以用来记录日志,也能够用于输入脚本的命令行。

2.记下日志

Firebug提供如下多少个常用的记录日志的函数:

console.log:不难的笔录日志;

console.debug:记录调试新闻,并且附上行号的超链接;

console.error:在音信前浮现错误图标,并且附上行号的超链接;

console.info:在新闻前展现音讯图标,并且附上行号的超链接;

console.warn:在纤细钱彰显警告图标,并且附行号的超链接。

在空白的html页面中,向<body>标签中投入<script>标签,代码如下:

JavaScript

<script type=”text/javascript”> console.log(‘this is log
message’); console.debug(‘this is debug message’); console.error(‘this
is error message’); console.info(‘this is info message’);
console.warn(‘this is warn message’); </script>

1
2
3
4
5
6
7
<script type="text/javascript">
  console.log(‘this is log message’);
  console.debug(‘this is debug message’);
  console.error(‘this is error message’);
  console.info(‘this is info message’);
  console.warn(‘this is warn message’);
</script>

施行代码后可以在Firebug中观察下图所示的结果,在此从前习惯了用alert来调试程序,可是在Firebug下可以使用console。

ca88电脑客户端 5

3.格式化字符串输出和多变量输出

那一个功效相近于C语言中的语法,可以在console记录日志的主意里选拔。

%s:字符串  %d,%i:数字  %f:浮点数  %o:链接对象

同时,那多少个函数协理三个变量。代码如下:

JavaScript

<script type=”text/javascript”> var
kid=”孩子”,count=”3″,man=”Allen”; var
sport1=”篮球”,sport2=”羽毛球”,sport3=”网球”;
console.log(“%d个%s在玩游戏”,count,kid);
console.log(count,”个”,kid,”在玩游戏”);
console.log(“%s擅长的移位有:”,man,sport1,sport2,sport3);
</script>

1
2
3
4
5
6
7
<script type="text/javascript">
  var kid="孩子",count="3",man="Allen";
  var sport1="篮球",sport2="羽毛球",sport3="网球";
  console.log("%d个%s在玩游戏",count,kid);
  console.log(count,"个",kid,"在玩游戏");
  console.log("%s擅长的运动有:",man,sport1,sport2,sport3);
</script>

运转代码后效果如下图所示:

ca88电脑客户端 6

Firebug控制台还提供了其他职能,例如检测函数执行时间、音信分组、测试驱动、跟踪、计数以及查看Javascript概略等。越来越多材料可以访问.

4.面板内的子菜单

支配台面板内有一排子菜单,分别是祛除、保持、概略、全体等。

ca88电脑客户端 7

“清除”用于破除控制巴尔的摩的内容。“保持”则是把控制莱比锡的内容保留,即便刷新了如故还留存。“全部”则是突显任何的音信。前边的“错误”、“警告”、“音信”、“调试新闻”、“Cookies”菜单则是对负有开展了一个分类。

“概况”菜单用于查看函数的质量。上面通过一个事例来演示,代码如下:

JavaScript

<button type=”button” id=”btn1″>执行循环1</button>
<button type=”button” id=”btn2″>执行循环2</button>
<button type=”button” id=”btn3″>执行循环3</button>
<script type=”text/javascript”> var f1=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); } function f2(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); }
document.getElementById(“btn1”).onclick=f1;
document.getElementById(“btn2”).onclick=f2;
document.getElementById(“btn3”).onclick=function(){ for(var i
=0;i<1000;i++) for(var j=0;j<1000;j++); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button type="button" id="btn1">执行循环1</button>
<button type="button" id="btn2">执行循环2</button>
<button type="button" id="btn3">执行循环3</button>
<script type="text/javascript">
    var f1=function(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
    function f2(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
    document.getElementById("btn1").onclick=f1;
    document.getElementById("btn2").onclick=f2;
    document.getElementById("btn3").onclick=function(){
        for(var i =0;i<1000;i++)
            for(var j=0;j<1000;j++);
    }
</script>

开辟页面,显示七个按钮:

ca88电脑客户端 8

开辟页面后,先启用Firebug控制台面板,然后单击“概略”菜单,如下图所示:

ca88电脑客户端 9

从上图中可以观察,出现了一行字,“概略收集中。再一次点击“概略”查看结果。”,接着,依次单击“执行循环1”、“执行循环2”、“执行循环3”七个按钮各三遍,并再一次单击“概略菜单”,即可看出如下图所示结果:

ca88电脑客户端 10

能够看出Firebug呈现出了要命详尽的告知。包罗各样函数的函数名、调用次数、占用时间的比重、占用时间、时间、平均时间、最小时间、最大时间以及所在的公文的行数等新闻。

5.Ajax调试

操纵台面板也可用来Ajax调试,在肯定程度上可以代表互联网面板。例如我打开一个页面,可以在Firebug控制台看到这次Ajax的Http请求头音讯和服务器响应头消息。如下图,它会展现出这一次使用的Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最要害的是有5个标签,即参数、头音讯、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数;首个标签用于查看响应头音信和央浼头音信;第两个标签用于查看服务器重返的内容;第二个标签则是翻开服务器重临的HTML结构;第八个标签用于查六柱预测应的Cookies。

ca88电脑客户端 11

万一看不到任何音信的面世,可能是将此意义关闭了,可以单击“控制台”旁边的下拉箭头,将“突显XMLHttpRequests”前边的勾勾选上即可。

ca88电脑客户端 12

如何得到Firebug?

因为它是Firefox浏览器的一个扩大插件,所以率先要求下载Firefox浏览器。读者可以访问www.mozilla.com下载并设置Firefox浏览器。安装完结后用它访问这里

跻身下图所示页面。点击”添加到Firefox”,然后点击”立即安装”,最终重复启航Firefox浏览器即可已毕安装。

ca88电脑客户端 13

自行刷新

“自动刷新”并不是新的定义,但对关切“可知”的预览效果的前端开发者来说,它不行好用,可以节约很多小时。

自身也不是前几日才晓得那些定义。在那此前,我平素在用LiveReload,它是一个名字上更醒目地写着“自动刷新”的工具。LiveReload主要搭配浏览器插件使用,是很棒的机关刷新工具。

但是,现在本身要介绍的是BrowserSync。你会在接下去的情节里看到,它是一个翻新、更便利的开发工具。

网站地图xml地图