Web Essentials之Browser Link
本篇目录
当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的更多相关文章
- Visual Studio 2013 Web开发、新增功能:“Browser Link”
微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...
- Visual Studio 2013 Web开发、新增功能:“Browser Link”
微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...
- 让人一用钟情的VS插件系列之一——Web Essentials(Web开发必备利器)
返回VS插件总目录 本篇目录 初识Web Essentials 看国外大牛如何评价Web Essentials Web Essentials下载与安装 Web Essentials涉及到了哪些内容 初 ...
- 利用Browser Link提高前端开发的生产力
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如Ang ...
- Using Browser Link in Visual Studio 2013
题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如AngularJS的代码)在VS中的修改更加轻而易举. 前 端代码是运行在浏览器中,而Visual Studio通 ...
- Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则
众所周知Visual Studio 2013中有一个由SignalR机制实现的Browser Link功能,意思是开发人员可以同时使用多个浏览器进行调试,当按下IDE中的Browser Link按钮后 ...
- VS2013自带的Browser Link功能引发浏览localhost网站时不停的轮询
浏览localhost网站时候不管你打开那个页面它都会不停的轮询.据悉这是VS2013自带的Browser Link功能,里面用到SignalR机制 什么是Browser Link功能,什么是Sign ...
- Web Essentials之样式表StyleSheets
返回Web Essentials功能目录 本篇目录 智能感知 视觉提示 验证 Web标准 转换器 Web Essentials中大多数的CSS功能也适用于LESS. 智能感知 生成供应商特定的属性 如 ...
- VS 2013中的新特性browser link
Browser Link是连接VS和浏览器之间的通道.有了这个特性,web程序就能够和VS交互传递数据.这个特性在VS2013中是默认开启的.当开启了Browser Link, web程序运行的时候, ...
随机推荐
- 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]= ...
- HTML字体及颜色设置
字体(FONT)标记(TAGS) 标题字体(Header) <h#> ... </h#> #=1, 2, 3, 4, 5, 6<h1>今天天气真好!</h1& ...
- jquery选择器使用说明
在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...
- jsp实现回车登录
<body onkeydown="if(event.keyCode==13){login()}"> 内容0...... </body> 注:body里面加上 ...
- HDU 1575
Tr A Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- easyUI datagraid的列排序
在给datagraid做多列排序时请注意: 首先,做的是后台排序,那么需要设置: remoteSort:'true', 然后,不要添加 multiSort:'true',这个是多列一起排序无法实现.. ...
- 【转】gtk+多线程的程序实例
#include <gtk/gtk.h> gint test() { while(1) { gdk_threads_enter(); g_printf("hello\n" ...
- 用词法分析器Flex过滤日志
每日构造中,我的项目中 Visual Studio 的 MakeFile 后会产生大量信息,如下 Microsoft (R) Visual Studio Version 10.0.40219.1.Co ...
- 解决VS2010子目录中的.cpp文件引用上一级目录的stdafx.h找不到定义的问题
Source目录 |-- stdafx.h |--Util目录 |--Util.h |--Util.cpp 现在的发现Util.cpp各种变量的定义全是红色波浪线,找不到定义,但是却能够编译过 问题就 ...
- Linux 常用工具小结:(5) lftp工具使用
Linux 常用工具小结:(1) lftp工具使用. 这里会按照一些比较常用的功能列出,并举一个具体的例子逐一解释功能. 通常使用ftp过程是登陆ftp,浏览ftp内容,下载ftp文件,或者上传ftp ...