使用准现网的数据,使用本地的样式脚本,本地调试准现网页面(PC适用)
原理:
本地逻辑,重新渲染
步骤:
1.安装插件:Tampermonkey
度盘:https://pan.baidu.com/s/1bpBVVT9
2.设置:
点击插件-->仪表盘
添加脚本
将此文本文档中的脚本复制到脚本编辑框处,并Ctrl+S保存
// ==UserScript==
// @name 新架构准现网本地调试插件
// @namespace http://www.wuhairui.cn/
// @version v1.1
// @description 使用服务器的数据,使用本地的样式脚本重新渲染一次dom,实现本地调试。仅支持PC联调
// @author 海瑞菌
// @match http://*/rbc/*/*.html*
// @match http://*/nap/*/*.jsp*
// @match http://*/hbc/*/*.jsp*
// @match http://*/rbc/*/*.jsp*
// @match http://*/cbc/*/*.jsp*
// @match http://*/mbc/*/*.jsp*
// @grant 海瑞菌
// ==/UserScript==
/* jshint -W097 */
/*使用url:pageIndex:组件下标pageName:本地页面名样例:页面名称:搜索url:http://wap.cmread.com/nap/t/search.jsp?kw=1pageIndex:2491 (表示你要调试的组件id)pageName:search_select (表示你的本地页面名,如:http://10.73.154.82:8088/rbc/t/search_select.html)如访问:http://wap.cmread.com/nap/t/search.jsp?kw=1&pageIndex=2491&pageName=search_select
*/
'use strict';{//是否新架构try{if(!pageConfig) return;}catch(err){return;}
}
{//进入新架构let ip="localhost";//127.0.0.1//本地新样式脚本对象let newcssjs={//获取url参数值getQueryString:(name)=>{let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");let r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;},//载入csssetcss:(url)=>{let cssCode=document.createElement('link');cssCode.setAttribute('href',url);cssCode.setAttribute('id','css');cssCode.setAttribute('rel','stylesheet');cssCode.setAttribute('type','text/css');document.head.appendChild(cssCode);},//载入jssetjs:(url)=>{let jsCode=document.createElement('script');jsCode.setAttribute('src',url);jsCode.setAttribute('id','js');jsCode.setAttribute('type','text/javascript');document.body.appendChild(jsCode);},}//选取调试组件let pageIndex=newcssjs.getQueryString("pageIndex");if(pageIndex && pageIndex!="" && pageConfig){let pageIndexArr=pageIndex.split(',');pageConfig.pageIndex=pageIndexArr;}//同步ajax头// if(pageConfig){// let ajaxHead=pageConfig.ajaxHead;// if(ajaxHead.includes('/rbc/'))// pageConfig.ajaxHead=`${location.origin}/rbc/`;//本地 | 上现网// else// pageConfig.ajaxHead=`${location.origin}/nap/`;//联调// }//打印数据样式let logStyle=`color:red;`;console.log("%cpageData",`${logStyle}font-size:1.5em`,JSON.stringify(pageData));console.log("%cpageConfig",`${logStyle}font-size:1.5em`,JSON.stringify(pageConfig));//载入本地样式脚本并渲染let pageName=newcssjs.getQueryString("pageName");if(pageName){$("*").unbind();$(document,window).unbind();$("body").html("");$("body").html(`<div id="common"></div><div id="main"></div>`);let css=`http://${ip}:8088/asset/dev/${pageName}/index.css`;let js=`http://${ip}:8088/asset/dev/${pageName}/index.js`;$("style").eq(0).remove();newcssjs.setcss(css);newcssjs.setjs(js);console.log("%c本地调试开始!",`${logStyle}font-size:2em`);}else{if(location.port=="8088" && location.href.includes("/rbc/") && location.href.includes(".html")){console.log("%c调的就是本地的!",`${logStyle}font-size:2em`);}else{console.log("%c本地调试未开启!",`${logStyle}font-size:2em`);}}
}
点击设置,对脚本进行设置
加载位置与仅顶层页面运行设置如下图
3.调试:
打开你要调试的准现网页面,
如:http://wap.cmread.com/nap/t/search.jsp?vt=3&kw=1
console处会看到
若你要调试当前页面中的其中某个组件
看到pageIndex数组(当前页面加载的组件列表),
我调试第一个组件,在当前url中加入参数pageIndex=2714
再加入参数pageName=你的本地页面名
如这是我的本地页面地址,那pageName=search_select
(前提:本地gulp与tomcat要打开)
那本地调试的页面就是:
http://wap.cmread.com/nap/t/search.jsp?vt=3&kw=1&pageIndex=2714&pageName=search_select
对应的脚本就是:(本地的保存代码后直接刷新页面)
若不想调试了,可关闭脚本注入
或
去除url的pageIndex与pageName 2个参数
方法的缺点或不足:
2次渲染后,某些事件可能会执行2次,如上拉加载第二页的ajax请求
转载于:https://www.cnblogs.com/wuhairui/p/9007615.html
使用准现网的数据,使用本地的样式脚本,本地调试准现网页面(PC适用)相关推荐
- asp.net 研发,测试,或现网....非本机环境采用附加进程的方式在本地调试
1.在本地IIS配置一个站点,或虚拟目录跟 研发,测试,或现网....的url结构一致,IP地址:127.0.0.1,主机头跟要调试的环境一致:如:g0.xx.10086rd.cn 2.hosts配置 ...
- Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储(转)
Python爬虫可以说是好玩又好用了.现想利用Python爬取网页股票数据保存到本地csv数据文件中,同时想把股票数据保存到MySQL数据库中.需求有了,剩下的就是实现了. 在开始之前,保证已经安装好 ...
- python抓取数据库数据_Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储...
Python爬虫可以说是好玩又好用了.现想利用Python爬取网页股票数据保存到本地csv数据文件中,同时想把股票数据保存到MySQL数据库中.需求有了,剩下的就是实现了. 在开始之前,保证已经安装好 ...
- python爬虫实现股票数据存储_Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储!...
Python爬虫可以说是好玩又好用了.现想利用Python爬取网页股票数据保存到本地csv数据文件中,同时想把股票数据保存到MySQL数据库中.需求有了,剩下的就是实现了. 在开始之前,保证已经安装好 ...
- MySQL 怎么插入10天前的日期_Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储!...
Python爬虫可以说是好玩又好用了.现想利用Python爬取网页股票数据保存到本地csv数据文件中,同时想把股票数据保存到MySQL数据库中.需求有了,剩下的就是实现了. 在开始之前,保证已经安装好 ...
- Redis现网那些坑:用个缓存,还要为磁盘故障买单?
本文分享自华为云社区<Redis现网那些坑:用个缓存,还要为磁盘故障买单?>,作者: GaussDB 数据库 . 近日,网上一些电商用户出现了库存业务查询超时的现象,深究根源,是其使用的R ...
- 【内存泄漏】一个现网问题告诉你血淋淋的事实:java内存泄漏很严重
目录 什么是内存泄漏 GC原理 GC Roots对象 java内存模型 现网问题 如何发现和解决 总结,什么情况下会出现内存泄漏 很多同学可能都有一个误解,C++才需要程序员自己管理对象的生命周期,在 ...
- python爬虫爬取股票软件数据_Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储(转载)...
完整代码 实际上,整个事情完成了两个相对独立的过程:1.爬虫获取网页股票数据并保存到本地文件:2.将本地文件数据储存到MySQL数据库.并没有直接的考虑把从网页上抓取到的数据实时(或者通过一个临时文件 ...
- 广和通携手中国联通研究院、中科创达现网验证全球首例5G模组端到端多切片方案
当前5G处于规模发展的关键时期,5G行业模组成熟发展是推进5G规模应用的关键环节.目前5G模组价格仍然较高,行业需求较为碎片化,且5G最具特色的功能5G网络切片尚未在行业模组上探索出成熟端到端解决方案 ...
最新文章
- 七夕节马上到了,有对象的,无对象的必备神奇用Python做一个烟花秀
- 引子 我想大家应该都很熟悉DNS了,这回在DNS前面加了一个D又变成了什么呢?这个D就是Dynamic(动态),也就是说,按照传统,一个域名所对应的IP地址应该是定死的,而使用了DDNS后,域名所对应
- Flex与后台交互的4种方法
- 奔小康赚大钱(HDU-2255)
- rstudio安装包_如何安装R与Rstudio
- C# ListView用法详解
- 大学计算机文档基本操作实验的效果,上海工程技术大学计算机实验报告5
- tomcat查看线程数
- qnap威联通作文件服务器,QNAP 威联通 TS-453A NAS存储服务器 开箱初体验
- 渗透测试思路 - 关于黑灰产的那些事(番外篇)
- 计算机硬盘为啥要入固定资产,监控存储硬盘入固定资产吗
- 2018CSTC web2 writeup
- 2023速卖通开店入驻流程及费用,新店运营思路
- Spring——IoC和DI
- python篮球弹跳训练方法_业余篮球爱好者的弹跳训练全攻略(附6个月训练计划)...
- [E进位制] lc168. Excel表列名称(进位制+进制转换)
- jQuery名字滚动老虎机抽奖
- 最新WIN10系统封装教程2019系列(二)——虚拟机与母盘安装
- 师古创今匠心品质,打造红木中式整装
- vue+Echarts 实时大屏看板
热门文章
- FTP 两种传输模式 Binary 和 ASCII 的区别
- python selenium循环判断元素是否存在_检查Python Selenium是否存在元素
- python中运算符号怎样表示_Python中的运算符与表达式
- 【安卓开发 】Android初级开发(九)Android中封装View提供接口供点击事件回调的方法及使用
- 自定义日历控android,Android自定义日历Calender代码实现
- windows系统c 实现ftp服务器,windows系统c 实现ftp服务器
- http协议下需要服务器推送吗,HTTP/2.0 服务器推送实现
- wordpress致命错误怎么解决_pppoe错误是什么意思 pppoe错误怎么解决
- 【渝粤教育】国家开放大学2018年秋季 1062t文学英语赏析 参考试题
- 【渝粤教育】电大中专中药制剂学 (2)作业 题库