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

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

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

    1.起因 编写的项目是一个偏向于后台管理的web系统,使用了angular框架,在绑定数据的时候就依赖于后台的接口格式. 以前是后台写好接口后,我在绑定,在这之前一些逻辑是没法做的,有时候后台接口给的 ...

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

    1.使用场景 我用的是Chrome,Ctrl+F5并不是在任何时候都能清楚缓存,这样很影响效率,下面的方式可以在开发者工具打开的使用禁止浏览器缓存任何资源, 还是出现不及时更新的情况,就要考虑服务器是 ...

  3. 如何合理优化WEB前端 高效提升WEB前端性能

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

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

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

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

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  6. 【转载】十条jQuery代码片段助力Web开发效率提升

    文章转载自 51CTO http://www.51cto.com/ 原文链接:http://developer.51cto.com/art/201604/509093.htm原文摘要:JQuery是继 ...

  7. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

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

    平滑滚动至页面顶部 以下是jQuery最为常见的一种实现效果:点击一条链接以平滑滚动至页面顶部.虽然没什么新鲜感可言,但每位开发者几乎都用得上. $("a[href='#top']" ...

  9. [web 前端] Npm package.json与package-lock.json文件的作用

    本文链接:https://blog.csdn.net/u013992330/article/details/81110018 最新版nodejs中,多了一个package-lock.json文件,刚开 ...

随机推荐

  1. RobotFramework和Eclipse集成-安装和使用说明

    1.安装python3. 安装说明: https://www.cnblogs.com/Simple-Small/p/9179061.html 2.RF安装命令:Pip install RobotFra ...

  2. 【算法】螺旋方阵 上交OJ1021

    输入格式: 输入在一行中给出一个正整数N(<10). 输出格式: 输出N×N的螺旋方阵.每行N个数字,每个数字占3位. 输入样例: 5 1 2 3 4 5 16 17 18 19 6 15 24 ...

  3. Jmeter二次开发代码（2）

    /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...

  4. webpack code splitting

    一.代码分割优化 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin' ...

  5. int float double　最小值与最大值

    #include <iostream> #include <limits> using namespace std; int main() { cout << &q ...

  6. Tomcat热部署--start tomcat后就可自动部署war包

    使用tomcat图形化界面,需要现在配置文件中设置用户名和密码: 在maven中配置Tomcat插件: root目录下的内容可以直接访问: 跳过测试: 查看端口占用:

  7. 【很好的分享】zookeeper系列

    http://blog.csdn.net/tswisdom/article/details/41522069

  8. Python3.7源码在windows（VS2015）下的编译和安装

    Python3.7源码在windows(VS2015)下的编译和安装 下载官方源码,使用vs2015(WIN10SDK),最python3.7.0的源码进行编译,编译出不同的版本(release,de ...

  9. 龙光集团地产跃居“中国房地产500强TOP28”

    3月20日,由中国房地产业协会.上海易居房地产研究院中国房地产测评中心联合主办的2019中国房地产500强测评成果发布会在北京成功举办.本次测评成果显示,龙光集团地产凭借综合实力,不仅成功跻身“中国房 ...

  10. JS 基础知识点

    最近发现一个好东西,掘金小册,觉得里面的东西挺不错的,准备仔细阅读一下,提升下自己. 记录一下,随便加深点儿印象,主要内容源自于小册. 原始类型 原始类型也成为基本数据类型 boolean null ...