【yzc88亚洲城网页版】10分钟学会前端调试利器,前端调试利器

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/*.css” 

 

【yzc88亚洲城网页版】10分钟学会前端调试利器,前端调试利器。 
【改过之后的代码】能将地点服务器代理到localhost:3001/localhost:3000,且能实时刷新修改的代码

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

效果图如下
git bash here


cmd


保存时

yzc88亚洲城网页版,概述

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

什么收获Firebug?

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

跻身下图所示页面。点击”添加到Firefox”,然后点击”立时安装”,最后重复起动Firefox浏览器即可到位安装。

yzc88亚洲城网页版 1

yzc88亚洲城网页版 2

转发地址:请戳这里

主面板

设置到位之后,在Firefox浏览器的地址后方就会有一个小虫子的图标yzc88亚洲城网页版 3。单击该图标后即可举行Firebug的控制台,也足以经过飞速键<F12>来打开控制台。使用Ctrl+F12疾速键可以使Firebug独立打开一个窗口而不占用Firefox页面尾部的上空。

yzc88亚洲城网页版 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。

yzc88亚洲城网页版 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>

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

yzc88亚洲城网页版 6

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

4.面板内的子菜单

控制台面板内有一排子菜单,分别是驱除、保持、轮廓、全体等。

yzc88亚洲城网页版 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>

开辟页面,突显五个按钮:

yzc88亚洲城网页版 8

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

yzc88亚洲城网页版 9

从上图中得以看来,出现了一行字,“轮廓收集中。再一次点击“轮廓”查看结果。”,接着,依次单击“执行循环1”、“执行循环2”、“执行循环3”八个按钮各两回,比量齐观复单击“概况菜单”,即可看出如下图所示结果:

yzc88亚洲城网页版 10

能够见见Firebug显示出了丰裕详尽的告诉。包含各种函数的函数名、调用次数、占用时间的比例、占用时间、时间、平均时间、最小时间、最大时间以及各市的文件的行数等音信。

5.Ajax调试

支配台面板也可用以Ajax调试,在一定水平上得以代表互联网面板。例如小编打开一个页面,可以在Firebug控制台看到这次Ajax的Http请求头消息和服务器响应头音信。如下图,它会显示出本次使用的Ajax的GET方法、地址、耗时以及调用Ajax请求的代码行数。最关键的是有5个标签,即参数、头音信、响应、HTML、Cookies.第三个标签用于查看传递给服务器的参数;第四个标签用于查看响应头音讯和央浼头音信;第两个标签用于查看服务器重回的内容;第两个标签则是翻开服务器重临的HTML结构;第五个标签用于查算命应的Cookies。

yzc88亚洲城网页版 11

只要看不到任何音信的面世,大概是将此成效关闭了,可以单击“控制台”旁边的下拉箭头,将“展现XMLHttpRequests”前边的勾勾选上即可。

yzc88亚洲城网页版 12

哪些取得Firebug?

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

跻身下图所示页面。点击”添加到Firefox”,然后点击”马上安装”,最后再一次起动Firefox浏览器即可成功安装。

yzc88亚洲城网页版 13

自动刷新

“自动刷新”并不是新的定义,但对关注“可知”的预览效果的前端开发者来说,它可怜好用,可以节省很多日子。

自小编也不是明天才知道那一个概念。在那从前,小编直接在用LiveReload,它是一个名字上更明显地写着“自动刷新”的工具。LiveReload首要搭配浏览器插件使用,是很棒的机动刷新工具。

而是,将来本身要介绍的是BrowserSync。你会在接下去的始末里看看,它是一个更新、更便宜的开发工具。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图