返回Web Essentials功能目录


本篇目录

当Browser Link运行时,会有一个菜单注入到你的网站上,Web Essentials可以使用该菜单上所有可用的一套Browser Link功能。

要想了解更多关于Browser Link的信息,请点击下面的图片:

功能

启用了Browser Link之后,打开我的网站时,就出现了一个如下图所示的浮动的工具条:

下面一一介绍该工具条上的所有功能:

Auto-hide

如果你总是不想看到这个菜单,那么可以选中该复选框,使它默认不可见。要切换该菜单的可见性,只要按一下Ctrl键就可以了。

Inspect Mode(检查模式)

当鼠标悬停在任何浏览器页面的DOM元素上时,Visual Studio将会打开源文件并定位到生成该特定DOM元素的确切位置。

Design Mode

Inspect Mode很像,但是当你最后点击浏览器中的DOM元素时,该元素会变成可编辑的。任何编辑都会实时地传给Visual Studio来更新源文件。如下图所示:

Save F12 changes

当在多个浏览器的开发者工具中做了编辑时,你可以点击Save F12 changes将改变的内容传送到Visual Studio的源文件中。。这个只对CSS有效。请认真观察下图中代码在浏览器控制台中的变化以及在VS中的变化。

F12 auto-sync

不需要手动点击Save F12 changes,你就可以将所做的更改实时流入Visual Studio。这个就不尝试了,大家可以自己试试!

Find Unused CSS

点击这个按钮,将会开始记录网站中使用的不同的CSS规则。只需要在网站中导航浏览,当你操作完成后,再次点击该按钮。就会在Visual Studio的错误列表中生成没有使用的CSS列表。从下面的图中可以看出,即使没有刷新,没有使用的CSS也已经找出来了。

最佳实践

Web Essentials使用了webdevchecklist.com的一些规则作为最佳实践。如果发现任何违规,就会在错误列表中展示一条消息。

Web Essentials之Browser Link的更多相关文章

  1. Visual Studio 2013 Web开发、新增功能:“Browser Link”

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  2. Visual Studio 2013 Web开发、新增功能:“Browser Link”

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  3. 让人一用钟情的VS插件系列之一——Web Essentials(Web开发必备利器)

    返回VS插件总目录 本篇目录 初识Web Essentials 看国外大牛如何评价Web Essentials Web Essentials下载与安装 Web Essentials涉及到了哪些内容 初 ...

  4. 利用Browser Link提高前端开发的生产力

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如Ang ...

  5. Using Browser Link in Visual Studio 2013

    题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如AngularJS的代码)在VS中的修改更加轻而易举. 前 端代码是运行在浏览器中,而Visual Studio通 ...

  6. Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则

    众所周知Visual Studio 2013中有一个由SignalR机制实现的Browser Link功能,意思是开发人员可以同时使用多个浏览器进行调试,当按下IDE中的Browser Link按钮后 ...

  7. VS2013自带的Browser Link功能引发浏览localhost网站时不停的轮询

    浏览localhost网站时候不管你打开那个页面它都会不停的轮询.据悉这是VS2013自带的Browser Link功能,里面用到SignalR机制 什么是Browser Link功能,什么是Sign ...

  8. Web Essentials之样式表StyleSheets

    返回Web Essentials功能目录 本篇目录 智能感知 视觉提示 验证 Web标准 转换器 Web Essentials中大多数的CSS功能也适用于LESS. 智能感知 生成供应商特定的属性 如 ...

  9. VS 2013中的新特性browser link

    Browser Link是连接VS和浏览器之间的通道.有了这个特性,web程序就能够和VS交互传递数据.这个特性在VS2013中是默认开启的.当开启了Browser Link, web程序运行的时候, ...

随机推荐

  1. poj3009

    #include <stdio.h> int H,L; int qx,qy,zx,zy; int map[21][21]; int ax[4]={-1,0,1,0}; int ay[4]= ...

  2. HTML字体及颜色设置

    字体(FONT)标记(TAGS) 标题字体(Header) <h#> ... </h#> #=1, 2, 3, 4, 5, 6<h1>今天天气真好!</h1& ...

  3. jquery选择器使用说明

    在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...

  4. jsp实现回车登录

    <body onkeydown="if(event.keyCode==13){login()}"> 内容0...... </body> 注:body里面加上 ...

  5. HDU 1575

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. easyUI datagraid的列排序

    在给datagraid做多列排序时请注意: 首先,做的是后台排序,那么需要设置: remoteSort:'true', 然后,不要添加 multiSort:'true',这个是多列一起排序无法实现.. ...

  7. 【转】gtk+多线程的程序实例

    #include <gtk/gtk.h> gint test() { while(1) { gdk_threads_enter(); g_printf("hello\n" ...

  8. 用词法分析器Flex过滤日志

    每日构造中,我的项目中 Visual Studio 的 MakeFile 后会产生大量信息,如下 Microsoft (R) Visual Studio Version 10.0.40219.1.Co ...

  9. 解决VS2010子目录中的.cpp文件引用上一级目录的stdafx.h找不到定义的问题

    Source目录 |-- stdafx.h |--Util目录 |--Util.h |--Util.cpp 现在的发现Util.cpp各种变量的定义全是红色波浪线,找不到定义,但是却能够编译过 问题就 ...

  10. Linux 常用工具小结:(5) lftp工具使用

    Linux 常用工具小结:(1) lftp工具使用. 这里会按照一些比较常用的功能列出,并举一个具体的例子逐一解释功能. 通常使用ftp过程是登陆ftp,浏览ftp内容,下载ftp文件,或者上传ftp ...