前端样式脚本本地化方案③

前面分享了2个本地化开发的方案,但是都不是很好,需要改变原先的html代码才能进行调试,如果开发者开发完后没有将原先的html改回去,就会出现本地跨站,别人进入这个页面报错,或者出现跨域站点内容。为了测试而改动原代码,实际并不友好。

所以这次给各位带来一个在不改变原代码的情况下进行样式脚本本地化调试的一种方案:
(此方案是一个谷歌插件结合之前方法中的一个本地服务器而成的,方便代码调试)

前两个方案详情请看:http://www.cnblogs.com/wuhairui/p/6105238.html

但该方案也有个问题,就是不能在移动端中进行本地调试了,只能在PC页面中调试。不过一般在PC上调试没什么问题的话,就不会有多大问题。如果必须要在移动端进行本地调试,那么可以使用前两种方案。有自信的话到,直接放入现网脚本再也没有什么问题。(根据情况选择适合的方案即可)

一:下载安装插件:
1. 首先下载一个chrome插件tampermonkey:http://pan.baidu.com/s/1cb0ulC
2. 在chrome浏览器下,进入拓展程序(如图)

将下载的这个crx插件拖入到这个页面保存即可。

浏览器右上角将会生成一个新插件:

 

二:下载一个本地php服务器安装包:http://pan.baidu.com/s/1qXDljgK

1. 此服务器基本是傻瓜式安装,如果不清楚的可以去这篇文章看看:
http://www.cnblogs.com/wuhairui/p/6105238.html
安装完成后,进入桌面的某个文件夹:

在里面创建一个css或js文件

三:设置chrome插件tampermonkey:

1. 点击仪表盘

2. 新增适配

3. 编辑代码框(已在本地调试咪咕阅读站点为例)

将name和match更改为如图所示
然后将这段脚本覆盖到下方,让该站点下的所有页面都实现以下功能。

具体代码:(将本地css加入到head最后,本地js加入到body最后)

然后Ctrl+S键即可保存脚本代码

//利用本地存储载入本地样式脚本进行本地化调试
var newcss=localStorage.css;
var newjs=localStorage.js;
if(newcss!=undefined && newcss!="" && newcss.indexOf(".css")!=-1 && newjs.indexOf("http://")!=-1){
    $('<div style="text-align:center;background-color:red;line-height:20px;font-size:15px;color:yellow;">本地样式表加载完毕,运行新样式表……</div>').prependTo("body");
	var jsCode=document.createElement('link');
	jsCode.setAttribute('rel','stylesheet');
	jsCode.setAttribute('href',newcss);
	document.head.appendChild(jsCode);
}else{
    $('<div style="text-align:center;background-color:red;line-height:20px;font-size:15px;color:yellow;">本地样式表加载失败</div>').prependTo("body");
}
if(newjs!=undefined && newjs!="" && newjs.indexOf(".js")!=-1 && newjs.indexOf("http://")!=-1){
    $('<div style="text-align:center;background-color:red;line-height:20px;font-size:15px;color:yellow;">本地脚本加载完毕,运行新脚本……</div>').prependTo("body");
	var jsCode=document.createElement('script');
	jsCode.setAttribute('src',newjs);
	document.body.appendChild(jsCode);
}else{
    $('<div style="text-align:center;background-color:red;line-height:20px;font-size:15px;color:yellow;">本地脚本加载失败</div>').prependTo("body");
}

//(当然啦,你想要实现什么其他功能,也可以继续在插件中添加或修改。)

此段代码的实现功能就是,在本地缓存中加入两个缓存,已实现不改变插件代码来方便引入本地代码进行调试。

想更换也可以双击缓存栏目进行编辑更换

当浏览器打开设定的网址时即可引用到那段插件脚本,插件上可切换是否载入

即可更改本地文件来调试页面了

原文地址:https://www.cnblogs.com/wuhairui/p/6144581.html