10分钟学会前端调试利器,前端调试利器

作者:计算机知识

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

2015/09/17 · HTML5, 10分钟学会前端调试利器,前端调试利器。JavaScript · bwin必赢亚洲5566.com,1 评论 · 调试

原稿出处: 惟吾德馨(@阿伦_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" 

 

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

   browser-sync start --proxy "localhost:8080/whale/" --files "layouts/*.css" 

效果图如下
git bash here


cmd


保存时

概述

  FireBug是1个用以网址前端开垦的工具,它是Fire福克斯浏览器的三个恢弘插件。它能够用于调节和测试JavaScript、查看DOM、分析CSS、监察和控制网络流量以及开始展览Ajax交互等。它提供了大约前端开荒必要的漫天效果。官方网站:www.getfirebug.com

什么赢得Firebug?

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

进去下图所示页面。点击”加多到Firefox”,然后点击”马上安装”,最终再度开动Firefox浏览器就可以形成安装。

bwin必赢亚洲5566.com 1

bwin必赢亚洲5566.com 2

转发地址:请戳那里

主面板

设置到位之后,在Firefox浏览器的地点后方就会有一个小虫子的Logobwin必赢亚洲5566.com 3。单击该Logo后就可以进行Firebug的调控台,也足以透过火速键<F12>来展开调控台。使用Ctrl F1贰快速键能够使Firebug独立展开二个窗口而不占用Firefox页面后面部分的空中。

bwin必赢亚洲5566.com 4

从上海教室中可以看到,Firebug包含玖个面板:

垄断(monopoly)台面板:用于记录日志、大概浏览、错误提醒和实行命令行,同时也用于Ajax的调解;

HTML面板:用于查看HTML成分,能够实时地编辑HTML和改变CSS样式,它包罗一个子面板,分别是样式、布局和DOM面板;

CSS面板:用于查看全体页面上的CSS文件,能够动态地修改CSS样式,由于HTML面板中一度包罗了2个CSS面板,由此该面板将很少用到;

剧本面板:用于展现Javascript文件及其所在的页面,也可以用来显示Javascript的Debug调节和测试,包括三个子面板,分别是监督检查、仓库和断点;

DOM面板:用于体现页面上的装有目标;

网络面板:用于监视互连网移动,可以襄协助调查看一个页面包车型客车载入情状,包涵文件下载所攻克的光阴和文件下载出错等消息,也足以用来监视Ajax行为;

Cookies面板:用于查看和调动cookie(须求设置下文能源中所提到的Firecookie)。


 

概述

FireBug是2个用来网址前端开采的工具,它是FireFox浏览器的七个扩充插件。它能够用来调节和测试JavaScript、查看DOM、分析CSS、监察和控制网络流量以及举办Ajax交互等。它提供了大致前端开拓需求的万事效果。

官网:www.getfirebug.com

BrowserSync,调节和测试利器--自动刷新

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

标签:

---复苏内容开首---

请想象那样三个外场:你开着几个显示屏,壹边是IDE里的代码,另七只是浏览器里的您正在开拓的施用。此时桌上还放着你的手提式有线电话机,手提式有线电话机里也是那么些开荒中的应用。然后,你新写了一小段代码,按下了ctrl s保存。紧接着,你的无绳电话机和另一个显示屏里的施用,就成为了更新后的意义。你能够霎时检查职能是还是不是和你预想的等同,以至都不必要动一下鼠标...

想起来还能够?嗯,那只是简轻易单地省略掉那一个开荒进度中会按好些个遍的F5刷新。

  调控台面板

1.决定台面板大概浏览

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

二.记录日志

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

console.log:轻易的记录日志;

console.debug:记录调节和测试音信,并且附上行号的超链接;

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

console.info:在新闻前显示音信Logo,并且附上行号的超链接;

console.warn:在纤细钱呈现警告Logo,并且附行号的超链接。

在空白的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。

bwin必赢亚洲5566.com 5

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

以此职能左近于C语言中的语法,能够在console记录日志的点子里应用。

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

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

JavaScript

<script type="text/javascript"> var kid="孩子",count="三",man="Allen"; var sport一="篮球",sport二="羽球",sport三="网球"; console.log("%d个%s在玩游戏",count,kid); console.log(count,"个",kid,"在玩游戏"); console.log("%s擅长的移位有:",man,sport一,sport二,sport三); </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>

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

bwin必赢亚洲5566.com 6

Firebug调节台还提供了别的作用,例如检查评定函数施行时间、音信分组、测试驱动、追踪、计数以及查看Javascript概略等。更加多材质能够访问.

4.面板内的子菜单

操纵台面板内有1排子菜单,分别是铲除、保持、轮廓、全体等。

bwin必赢亚洲5566.com 7

“清除”用于破除调节马赛的内容。“保持”则是把调节哥伦布的内容保留,纵然刷新了一如既往还设有。“全部”则是显示全体的音讯。前面包车型大巴“错误”、“警告”、“新闻”、“调节和测试音讯”、“Cookies”菜单则是对负有开始展览了3个分拣。

“概略”菜单用于查看函数的性质。上面通过三个例子来演示,代码如下:

JavaScript

<button type="button" id="btn一">施行循环一</button> <button type="button" id="btn二">试行循环二</button> <button type="button" id="btn3">推行循环3</button> <script type="text/javascript"> var f1=function(){ for(var i =0;i<一千;i ) for(var j=0;j<一千;j ); } function f二(){ for(var i =0;i<1000;i ) for(var j=0;j<一千;j ); } document.getElementById("btn1").onclick=f1; document.getElementById("btn二").onclick=f二; document.getElementById("btn三").onclick=function(){ for(var i =0;i<1000;i ) for(var j=0;j<一千;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>

开荒页面,呈现多个开关:

bwin必赢亚洲5566.com 8

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

bwin必赢亚洲5566.com 9

从上航海用图书馆中得以见见,出现了壹行字,“轮廓搜集中。再度点击“概略”查看结果。”,接着,依次单击“推行循环1”、“试行循环二”、“试行循环三”四个开关各叁遍,同仁一视复单击“概略菜单”,就能够看到如下图所示结果:

bwin必赢亚洲5566.com 10

能够看出Firebug展现出了特别详细的报告。包罗各样函数的函数名、调用次数、占用时间的比例、占用时间、时间、平均时间、最小时间、最大日子以及所在的文书的行数等信息。

5.Ajax调试

决定台面板也可用以Ajax调节和测试,在料定水平上得以替代互连网面板。比如笔者展开3个页面,可以在Firebug调节台看到此次Ajax的Http请求头信息和服务器响应头新闻。如下图,它会来得出本次使用的Ajax的GET方法、地址、耗费时间以及调用Ajax请求的代码行数。最入眼的是有5个标签,即参数、头音信、响应、HTML、Cookies.第3个标签用于查看传递给服务器的参数;第一个标签用于查看响应头消息和伸手头音信;第8个标签用于查看服务器重回的内容;第多少个标签则是翻开服务器重返的HTML结构;第多个标签用于查六柱预测应的Cookies。

bwin必赢亚洲5566.com 11

万一看不到任何音讯的产出,恐怕是将此作用关闭了,能够单击“调控台”旁边的下拉箭头,将“展现XMLHttpRequests”前面包车型地铁勾勾选上就可以。

bwin必赢亚洲5566.com 12

怎么着赚取Firebug?

因为它是Firefox浏览器的二个扩充插件,所以率先要求下载Firefox浏览器。读者能够访问www.mozilla.com下载并设置Firefox浏览器。安装到位后用它访问这里

进去下图所示页面。点击"增加到Firefox",然后点击"立时安装",最终重复开动Firefox浏览器就可以完结安装。

bwin必赢亚洲5566.com 13

电动刷新

“自动刷新”并不是新的定义,但对关怀“可知”的预览效果的前端开荒者来说,它越来越好用,能够省去繁多时辰。

自己也不是未来才知道那一个定义。在那在此以前,小编直接在用LiveReload,它是贰个名字上更明显地写着“自动刷新”的工具。LiveReload首要搭配浏览器插件使用,是很棒的电动刷新工具。

而是,今后自个儿要介绍的是BrowserSync。你会在接下去的内容里观察,它是1个更新、更有益于的开荒工具。

本文由bwin必赢发布,转载请注明来源

关键词: 日记本 HTML5 前端那些事