原理：

本地邏輯，重新渲染

?

步驟：

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适用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。