使用准现网的数据,使用本地的样式脚本,本地调试准现网页面(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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/353706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FDATOOL设计滤波器

FDATOOL设计滤波器 分类&#xff1a; 数字信号处理 2006-04-20 11:251. 在Matlab中键入fdatool运行Filter Design and Analysis Tool。具体使用请参见Matlab Help中的Signal Processing Toolbox->FDATool。 2. 在fdatool工具中应该注意的几个问题&#xff1a;(a)Fstop&#…

大例外背后的真相

异常可能是最被滥用的Java语言功能。 这就是为什么 让我们打破一些神话。 没有牙仙子。 圣诞老人不是真实的。 TODO评论。 finalfinalversion-final.pdf。 无皂肥皂。 而且…例外实际上是例外。 后者可能需要更多说服力&#xff0c;但我们可以帮助您。 在这篇文章中&#xff…

MATLAB里面的filter和filtfilt的C语言源代码

MATLAB里面的filter和filtfilt的C语言源代码 嗯&#xff0c;算法非常简单&#xff0c;就是网上搜不到C代码实现。filter是个很万能的数字滤波器函数&#xff0c;只要有滤波器的差分方程系数&#xff0c;IIR呀FIR呀都能通过它实现。在MATLAB里面&#xff0c;filter最常用的格式是…

20172302『Java程序设计』课程 结对编程练习_四则运算第二周阶段总结

一.结对对象 姓名&#xff1a;周亚杰学号&#xff1a;20172302担任角色&#xff1a;驾驶员&#xff08;周亚杰&#xff09;伙伴第二周博客地址二.本周内容 (一)继续编写上周未完成代码 1.本周继续编写代码&#xff0c;使代码支持分数类计算 2.相关过程截图 a.下图是上周编写的生…

实践中的弹性基础架构

几周前&#xff0c;我获得了一个难得的机会&#xff0c;可以在基础设施领域弄脏双手。 在JVM内部的深入了解下&#xff0c;我每天的工作经历发生了有趣的变化&#xff0c;我想与您分享动机和成果。 希望它可以启发类似的问题类别。 背景 我将从解释需要解决方案的上下文开始。…

notepad++插件实现json、xml格式化

notepad比较出色的免费的数据编辑、格式化工具。。。 现在json、xml文件很流行、格式化也是必须的&#xff0c;方便查看关键信息&#xff01; 01、下载notepad及相关插件 npp_7.5.5-x86&#xff1a; https://files.cnblogs.com/files/xiaochina/npp_7.5.5-x86.zip npp-json:…

ActiveMQ 5.x中的消息持久性

我被问了很多关于ActiveMQ如何存储消息&#xff08;或在某些情况下不存储&#xff09;的基本知识。 这是它的高级解释。 注意&#xff0c;上下文在JMS中。 如果您使用ActiveMQ的非JMS客户端&#xff08;即STOMP&#xff0c;AMQP&#xff0c;MQTT等&#xff09;&#xff0c;则在…

一个select元素自定义设计的新思路:appearance: none之后利用符号制造小箭头

最近工作时解决了一个前端小问题&#xff08;如下图所示&#xff09;&#xff1a;在Safari中&#xff0c;select的控件之上有不和谐的灰色部分。 刚开始时我以为是backgrand或是border设置不当之类产生的问题&#xff0c;在搜索了很久之后终于找到了问题所在&#xff1a;这个灰…

调整HashMap的大小:未来的危险

最近&#xff0c;我偶然发现了一个错误&#xff0c;该错误是由于多个线程对java.util.HashMap的使用不当引起的。 该错误是抽象泄漏的一个很好的例子。 只有了解数据结构的实现级别详细信息&#xff0c;才能帮助我解决当前的问题。 因此&#xff0c;我希望分享我所面临的问题将…

别的程序员是怎么读你的简历的

别的程序员是怎么读你的简历的 2009年11月9日 陈皓 下面这个图片来源国外&#xff0c;是一个关于程序员面试时的简历&#xff0c;被人事部门和程序员本身评审的角度不同的图片。当然&#xff0c;这是一个从国外面试的视角制作的图片&#xff0c;不过&#xff0c;可以看出&#…

Zabbix linux agent 安装

系统&#xff1a;Linux Centos 7.3 x64 服务&#xff1a;Zabbix_agent 3.0.16 一.安装Zabbix_agent 服务 1.安装zabbix 3.0 yum源 rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabbix-release-3.0-1.el7.noarch.rpm 2.安装Zabbix_agent yum install zabbix-agen…

直接在apk中添加资源的研究

原文 http://blog.votzone.com/2018/05/12/apk-merge.html 之前接手过一个sdk的开发工作&#xff0c;在开发过程中有一个很重要的点就是尽量使用代码来创建控件&#xff0c;资源文件最好放到assets目录下&#xff0c;如果必须使用res资源&#xff0c;需要通过 getResources().g…

JavaFX实际应用程序:SkedPal

“真实世界的应用程序”系列中的一个新条目。 这次是SkedPal &#xff0c;这是一个用于智能管理忙人生活的应用程序。 我一直在咨询SkedPal团队有关JavaFX的事宜&#xff0c;并且在他们决定开始使用我的CalendarFX框架来满足他们的日历要求时&#xff0c;我也在咨询他们。 在下…

chromium之histogram.h

histogram不知道是干啥的 // Histogram is an object that aggregates statistics, and can summarize them in // various forms, including ASCII graphical, HTML, and numerically (as a // vector of numbers corresponding to each of the aggregating buckets). google翻…

viewobject_只读ViewObject和声明性SQL模式

viewobject介绍 声明式SQL模式被认为是基于实体的视图对象的最有价值的优点之一。 在这种模式下&#xff0c;根据UI中显示的属性在运行时生成VOSQL。 例如&#xff0c;如果某个页面包含一个只有两列EmployeeId和FirstName的表&#xff0c;则查询将生成为“从Employees中选择Emp…

MyEclipse6.0 安装axis2插件, 调用加密的SAP webservice

MyEclipse6.0 安装axis2插件, 调用加密的SAP webservice 6人收藏此文章, 我要收藏 发表于1个月前(2013-06-06 09:41) , 已有116次阅读 &#xff0c;共0个评论 首先鄙视一下自己&#xff0c;还在用myeclipse,竟然还是6.0版本&#xff0c;没办法&#xff0c;用习惯了&#xff0c…

Eclipse中要导出jar包中引用了第三方jar包怎么办

Eclipse中要导出jar包中引用了第三方jar包怎么办 (2009-07-20 15:28:44) 转载▼标签&#xff1a; it 分类&#xff1a; Eclipse 今天做个小的java程序&#xff0c;想要先将其导出成一个可执行的jar包&#xff01;向往常一样&#xff0c;单击菜单栏中的 File -> export,弹出…

拖动滑块拼图背景图没显示_计划B? 那是计划N…没什么。 拼图于2015年问世

拖动滑块拼图背景图没显示真是一天 当典型的欧洲人逐渐破产时&#xff0c;美国的人们开始喝咖啡。 这就是为什么我在Mark Reinhold最近的新闻中睡个好觉的原因。 他在题为“ Project Jigsaw&#xff1a;火车晚点 ”的帖子中建议将Project Jigsaw推迟到下一个版本Java 9。 在最近…

java keytool证书工具使用小结

Keytool 是一个Java数据证书的管理工具 ,Keytool将密钥&#xff08;key&#xff09;和证书&#xff08;certificates&#xff09;存在一个称为keystore的文件中在keystore里&#xff0c;包含两种数据:密钥实体&#xff08;Key entity&#xff09;-密钥&#xff08;secret key&a…

在Kafka中发布订阅模型

这是第四个柱中的一系列关于同步客户端集成与异步系统&#xff08; 1&#xff0c; 2&#xff0c; 3 &#xff09;。 在这里&#xff0c;我们将尝试了解Kafka的工作方式&#xff0c;以便正确利用其发布-订阅实现。 卡夫卡概念 根据官方文件 &#xff1a; Kafka是一种分布式的&…