web前端效率提升之浏览器与本地文件的映射-遁地龙卷风

1.chrome浏览器，机制是拦截url，　　　
　　1.在浏览器Element中调节的css样式可以直接同步到本地文件，反之亦然，浏览器会重新加载css，省去刷新
　　2.在source面板下对js的编辑可以同步到本地文件，反之亦然，浏览器会重新加载js，比如一些基于事件调用的函数，

更改之后再次被触发可以立马看到效果，省去刷新
　　3.对html的修该浏览器不会重新加载
　　更多的细节大家自行体会吧！
2.设置方法
　　目录中要避免出现中文！
　　我的版本是49，不同版本位置可能会有出入　　

　　已file:///D:/current/pratice/origin/test.html (也可拦截http请求)
　　F12打开开发者工具
　　点击source，左侧右键会弹出add folder to workspace ,点击后选择自己的工作目录，注意该工作目录是基路径

　　
　　我添加的是D:/current/pratice

　　点击开发者工具右上方的三个小店，再点击setting

　　

　　点击workspace，点击add

　　
　　file:///D:/current/pratice/ 是要匹配的url
　　如果是file:///D:/current/pratice/origin/test.html 则匹配origin/test.html
　　/是加在基路径后面的，也就是D:/current/pratice/，和在一起就是D:/current/pratice/origin/test.html，也就完成了映射

欢迎加入QQ群662546586

时间： 2024-12-19 06:24:38

web前端效率提升之浏览器与本地文件的映射-遁地龙卷风的相关文章

web前端效率提升-nginx+nodejs搭建本地生态

1.起因 编写的项目是一个偏向于后台管理的web系统,使用了angular框架,在绑定数据的时候就依赖于后台的接口格式. 以前是后台写好接口后,我在绑定,在这之前一些逻辑是没法做的,有时候后台接口给的慢,就要绑定假数据写死在js里面, 感觉非常被动,后台接口.服务器出个错什么的,我的进度就要被拖延,返回的格式不友好,或者返回的格式和传递的格式不一样的时候,我还要转格式. 人家拍拍屁股说接口写好了,回家休息,我就要加班来写代码. 2.解决思路 返回格式和接受格式,已表单提交为例 <input ng

web前端效率提升之禁用缓存-遁地龙卷风

1.使用场景 我用的是Chrome,Ctrl+F5并不是在任何时候都能清楚缓存,这样很影响效率,下面的方式可以在开发者工具打开的使用禁止浏览器缓存任何资源, 还是出现不及时更新的情况,就要考虑服务器是否完成部署了,额,这种情况你可能再用Eclipse之流开发. 2.方式方法 Chrome49设置方式如下: a.F12打开开发者工具 b c 58版本的Network上 QQ:1947147481  一起进步吧! 赞赏

web前端开发中的浏览器兼容性总结

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

十条jQuery代码片段助力Web开发效率提升

JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有

Mobile&amp;Web前端开发：移动浏览器的viewport实例分享

对于移动web开发.quirksmode.org有两篇文章详细介绍了Ataleoftwoviewport12感觉非常好,最好了解一下viewport概念.原本想翻译的但这两篇文章实在太长了没耐性,于是抽取了其中重点讲viewport局部,用半翻译半自己写的方式写出来,这也是为了让自己能够理解得更好一些. 其中CSS像素和设备像素的概念.要想了解得更清楚还是推荐看看那两篇文章.以下图片均来自http://quirksmode.org还有js获取各种宽高和位置的内容都没有提及. 桌面浏览器 先说说桌

Web前端(16)_F12打开浏览器调试以及网络协议详解

1.elements 指的当前页面的样式,查看图片以及布局等 2.console js交互 3.source 访问的当前页面涉及到哪些资源 4.network 4.1.request  Headers 其实这里浏览器还充当了socket客户端的角色,第一步就是和服务器建立连接 send和rec之间 1. 等待浏览器发送请求,拿到数据解析,http报文,返回给客户端 2.知道了用户请求后,服务器在特定的目录中找到文件,read出来(文件操作),拿到数据,把数据组织成http返回报文,返回前端 也就

几条jQuery代码片段助力Web开发效率提升

平滑滚动至页面顶部 以下是jQuery最为常见的一种实现效果:点击一条链接以平滑滚动至页面顶部.虽然没什么新鲜感可言,但每位开发者几乎都用得上. $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); 替换html标签 jQuery能够非常轻松地实现html标签替换,而这也将为我们带来更多

如何从请求、传输、渲染3个方面提升Web前端性能

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情.我们来看看用户访问网站,浏览器都做了哪些事情: 输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染. 通过上面的路径可以看出浏览器分为请求.传输.渲染三部分来实现用户的访问,本文就从这三个部分来浅析如何提升WEB前端性能. 请求浏览器为了减少请求传输,实现了自己的缓存机制.浏览器缓存就是把一个已经请求过的Web资源

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习