[{"data":1,"prerenderedAt":50},["ShallowReactive",2],{"case-mock-map-route-split-api-en":3,"blog-list-en":13},{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11,"html":12},"mock-map-route-split-api","New API Is Live, Frontend Hasn't Shipped? Debug with Forward Rules","After a service split, the frontend still hits the old API while orders already live on the new service. DevPeek Forward Rules forward specific endpoints to the new host without code changes; if the new service isn't ready, Mock gets the page working first.","2026-07-26",false,"Microservice integration and API host migration: use DevPeek Forward Rules for API forwarding—point old-host requests to the new service without changing the frontend. Mock when migration isn't done. Includes a hands-on demo.","api-debug-new-tricks",2,"\u003Cp>A half-finished microservice split is a joint-debug scenario almost every team runs into.\u003C\u002Fp>\n\u003Cp>The backend has moved orders to \u003Ccode>b.api.example.com\u003C\u002Fcode>, but production H5 still calls \u003Ccode>a.api.example.com\u003C\u002Fcode>. Profile works, order stats work, and the order list alone returns 501.\u003C\u002Fp>\n\u003Cp>The API isn't broken—the frontend and backend simply haven't shipped in the same release yet.\u003C\u002Fp>\n\u003Cp>Waiting for the full migration and a frontend release before re-testing often means scheduling delay. During the integration window, the practical move is: \u003Cstrong>keep the browser on the old API and configure DevPeek "Forward Rules" at the proxy layer to route specific paths to the new host\u003C\u002Fstrong>; if the new service isn't reachable yet, use \u003Cstrong>Mock\u003C\u002Fstrong> to short-circuit responses and validate the UI.\u003C\u002Fp>\n\u003Cp>This article walks through the \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo\">mock-map-route-demo\u003C\u002Fa>\u003C\u002Fstrong> case in \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo\">devpeek.demo\u003C\u002Fa>: \u003Cstrong>Forward Rules\u003C\u002Fstrong> vs Mock, plus how to write \u003Cstrong>path prefixes\u003C\u002Fstrong>, \u003Cstrong>port matching\u003C\u002Fstrong>, and \u003Cstrong>port inheritance\u003C\u002Fstrong> in a rule.\u003C\u002Fp>\n\u003Ch2>Who This Is For\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Teams mid \u003Cstrong>API host migration\u003C\u002Fstrong> who can't change the frontend base URL yet\u003C\u002Fli>\n\u003Cli>DevPeek users who capture traffic and want to try \u003Cstrong>Forward Rules\u003C\u002Fstrong> or Mock\u003C\u002Fli>\n\u003Cli>Readers of the \u003Ca href=\"\u002Fen\u002Fblog\u002Fapi-param-encryption-debug\u002F\">Param Transform article\u003C\u002Fa> curious what else the proxy chain can do\u003C\u002Fli>\n\u003Cli>First-time capture: start with \u003Ca href=\"\u002Fblog\u002Finstall-first-capture\u002F\">Install DevPeek and Capture Your First Request\u003C\u002Fa> (Chinese; English docs: \u003Ca href=\"\u002Fen\u002Fdocs\u002Fquick-start\u002F\">Quick Start\u003C\u002Fa>)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Prerequisites: Proxy, Certificate, System Proxy\u003C\u002Fh2>\n\u003Cp>This demo runs in a local browser. Traffic must go through DevPeek before \u003Cstrong>Forward Rules\u003C\u002Fstrong> take effect.\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Install DevPeek\u003C\u002Fstrong> and note the proxy port (title bar \u002F settings).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Set system proxy\u003C\u002Fstrong>: menu \u003Cstrong>Proxy → Set as system proxy\u003C\u002Fstrong> (local browser capture; for a phone, set Wi‑Fi proxy—see \u003Ca href=\"\u002Fen\u002Fdocs\u002Fquick-start\u002F\">Quick Start\u003C\u002Fa>).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-menu-system-proxy.png\" alt=\"Set system proxy\">\u003C\u002Fp>\n\u003Cp>\u003Cem>For local debugging, turn on system proxy from the DevPeek menu.\u003C\u002Fem>\u003C\u002Fp>\n\u003Col start=\"3\">\n\u003Cli>\u003Cstrong>Install and trust the root CA\u003C\u002Fstrong>: DevPeek → \u003Cstrong>Certificate Manager\u003C\u002Fstrong>, install into \u003Cstrong>Trusted Root Certification Authorities\u003C\u002Fstrong>. Without it, HTTPS shows CONNECT tunnels only—not decrypted requests\u002Fresponses. Full steps: \u003Ca href=\"\u002Fen\u002Fdocs\u002Fproxy-ssl\u002F\">Proxy & SSL certificates\u003C\u002Fa> (and the Chinese \u003Ca href=\"\u002Fblog\u002Finstall-first-capture\u002F\">first-capture walkthrough\u003C\u002Fa> if helpful).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>(Optional)\u003C\u002Fstrong> For HTTPS business hosts, add them to \u003Cstrong>SSL decrypt scope\u003C\u002Fstrong> (this demo uses \u003Ccode>http:\u002F\u002F*.demo.test:3002\u003C\u002Fcode>—plain HTTP, skip this).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>Done when:\u003C\u002Fstrong> Opening any page produces HTTP(S) rows in the DevPeek capture list.\u003C\u002Fp>\n\u003Ch2>Scenario: Three Hosts, One Server\u003C\u002Fh2>\n\u003Cp>The demo runs Express on \u003Ccode>:3002\u003C\u002Fcode> and uses the \u003Cstrong>Host header\u003C\u002Fstrong> to distinguish page, old API, and new API—a typical \u003Cstrong>API migration\u003C\u002Fstrong> in-between state:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Host\u003C\u002Fth>\n\u003Cth>Role\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>page.demo.test\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>H5 page\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>a.api.demo.test\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Hard-coded API in frontend (old)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>b.api.demo.test\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Orders live here (new)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Behavior (simplified):\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Endpoint\u003C\u002Fth>\n\u003Cth>a.api\u003C\u002Fth>\n\u003Cth>b.api\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fapi\u002Fuser\u002Fprofile\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fapi\u002Forders\u002Fstats\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fapi\u002Forders\u002Flist\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>❌ 501\u003C\u002Ftd>\n\u003Ctd>✅ 200\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>All three calls in \u003Ccode>script.js\u003C\u002Fcode> target \u003Ccode>http:\u002F\u002Fa.api.demo.test:3002\u002F...\u003C\u002Fcode>. With no \u003Cstrong>Forward Rules\u003C\u002Fstrong>, the orders section shows 501—normal mid-split pain.\u003C\u002Fp>\n\u003Ch2>Step 1: Run the Demo\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">git clone https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo.git\ncd devpeek.demo\npnpm install\npnpm --filter @devpeek\u002Fmock-map-route-demo dev\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>hosts\u003C\u002Fstrong> (all three point to localhost):\u003C\u002Fp>\n\u003Cpre>\u003Ccode>127.0.0.1  page.demo.test a.api.demo.test b.api.demo.test\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Open \u003Ccode>http:\u002F\u002Fpage.demo.test:3002\u002F\u003C\u002Fcode> and click \u003Cstrong>🔄 Re-check\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Do not enable any Forward Rules yet\u003C\u002Fstrong>—confirm the baseline: orders 501 on the old host.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Done when:\u003C\u002Fstrong> Profile and stats load; orders show \u003Cstrong>a.api — 501 Not Implemented\u003C\u002Fstrong>; progress stops at step 1.\u003C\u002Fp>\n\u003Cp>In the capture list, \u003Ccode>a.api.demo.test\u003C\u002Fcode> \u003Ccode>\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode> still returns 501:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-before-forward-list.png\" alt=\"Capture list before forwarding\">\u003C\u002Fp>\n\u003Cp>\u003Cem>Host in the list is still a.api; orders return 501.\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-before-forward-501-response.png\" alt=\"501 response body before forwarding\">\u003C\u002Fp>\n\u003Cp>\u003Cem>Body says a.api doesn't implement the endpoint—route to b.api via Forward Rules.\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch2>Step 2: Forward Rules — Orders Path Only\u003C\u002Fh2>\n\u003Cp>Entry: \u003Cstrong>Rules → Forward Rules\u003C\u002Fstrong> (or the \u003Cstrong>Forward\u003C\u002Fstrong> panel on the capture sidebar).\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-menu-forward-rules.png\" alt=\"Forward Rules menu entry\">\u003C\u002Fp>\n\u003Cp>Add one line (tab or space separated):\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">a.api.demo.test:3002\u002Fapi\u002Forders    b.api.demo.test\u002Fapi\u002Forders\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This rule means:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Pattern\u003C\u002Fstrong> with \u003Ccode>:3002\u003C\u002Fcode> matches only \u003Ccode>Host: a.api.demo.test:3002\u003C\u002Fcode>; omit port to match any port.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Target\u003C\u002Fstrong> without port \u003Cstrong>inherits the request port\u003C\u002Fstrong> (3002 here)—no need to repeat \u003Ccode>:3002\u003C\u002Fcode> on both sides.\u003C\u002Fli>\n\u003Cli>Only \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode> and sub-paths (e.g. \u003Ccode>\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode>) match; \u003Ccode>\u002Fapi\u002Fuser\u002Fprofile\u003C\u002Fcode> stays on a.api.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-forward-rule-filled.png\" alt=\"Port inheritance in Forward Rules\">\u003C\u002Fp>\n\u003Cp>\u003Cem>Pattern includes \u003Ccode>:3002\u003C\u002Fcode>; target is host-only—the upstream port comes from the request.\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>After saving, a path-level rule looks like:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-forward-rule-filled-with-port.png\" alt=\"Path-level Forward Rules example\">\u003C\u002Fp>\n\u003Cp>\u003Cem>Forwards \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode> and below only; profile still hits a.api.\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>If the whole API has moved to the new host, use a \u003Cstrong>host-level\u003C\u002Fstrong> rule—all sub-paths on a map 1:1 to b:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">a.api.demo.test:3002    b.api.demo.test\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>(Target may omit port here too—it inherits from the request.)\u003C\u002Fp>\n\u003Cp>Confirm \u003Ca href=\"#prerequisites-proxy-certificate-system-proxy\">system proxy is on\u003C\u002Fa> (above), then click \u003Cstrong>Re-check\u003C\u002Fstrong> on the page.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Done when:\u003C\u002Fstrong> Order table renders; UI shows forwarding is active; terminal log similar to:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">→ [GET] Host: b.api.demo.test:3002  \u002Fapi\u002Forders\u002Flist\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Capture \u003Cstrong>Overview\u003C\u002Fstrong> shows \u003Cstrong>Forwarded URL\u003C\u002Fstrong>—the real upstream is b.api while the list still shows the client's original URL. See \u003Ca href=\"\u002Fen\u002Fdocs\u002Fmap-route\u002F\">Forward Rules docs\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-after-forward-list.png\" alt=\"Capture list after forwarding\">\u003C\u002Fp>\n\u003Cp>\u003Cem>Same request: list still shows a.api; detail reveals the upstream.\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fdocs\u002Ffigures\u002Fdemo2\u002Fdemo2-a-api-after-forward-detail.png\" alt=\"Forwarded URL in request detail\">\u003C\u002Fp>\n\u003Cp>\u003Cem>Overview Forwarded URL points to b.api.demo.test:3002.\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch2>Step 3 (Optional): Mock — New Service Not Up Yet\u003C\u002Fh2>\n\u003Cp>If b.api isn't reachable but you need to validate the orders UI, add an \u003Cstrong>auto Mock\u003C\u002Fstrong> for \u003Ccode>GET ...\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode> with sample JSON (see \u003Cstrong>Mock fallback\u003C\u002Fstrong> at the bottom of the demo page).\u003C\u002Fp>\n\u003Ch3>Forward Rules vs Mock\u003C\u002Fh3>\n\u003Cp>Many teams new to \u003Cstrong>microservice integration\u003C\u002Fstrong> ask: Forward Rules or Mock?\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>\u003Cstrong>Forward Rules\u003C\u002Fstrong>\u003C\u002Fth>\n\u003Cth>Mock\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Hits real upstream\u003C\u002Ftd>\n\u003Ctd>✅ Yes\u003C\u002Ftd>\n\u003Ctd>❌ No (short-circuit)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Typical use\u003C\u002Ftd>\n\u003Ctd>New service ready; API forwarding\u003C\u002Ftd>\n\u003Ctd>Migration incomplete; validate UI\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Match on\u003C\u002Ftd>\n\u003Ctd>host + path + port\u003C\u002Ftd>\n\u003Ctd>Mock rules (URL, Method, …)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>\u003Cstrong>Forward Rules\u003C\u002Fstrong> actually connect to the new service—good when the new host is deployed but the frontend hasn't shipped. \u003Cstrong>Mock\u003C\u002Fstrong> skips upstream—good when the service isn't ready and you only need the UI.\u003C\u002Fp>\n\u003Cp>Combine both: Forward Rules to a test machine, then Mock an error on a path. See \u003Ca href=\"\u002Fen\u002Fdocs\u002Fmock\u002F\">Mock rules\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Forward Rules Syntax\u003C\u002Fh2>\n\u003Cp>Each rule has \u003Cstrong>Pattern\u003C\u002Fstrong> (match address) and \u003Cstrong>Target\u003C\u002Fstrong> (destination):\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Pattern → Target\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Address format:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">[http(s):\u002F\u002F]host[:port][\u002FpathPrefix]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Dimension\u003C\u002Fth>\n\u003Cth>Pattern (match)\u003C\u002Fth>\n\u003Cth>Target\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Cstrong>port\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>If set, must equal request port; if omitted, any port\u003C\u002Ftd>\n\u003Ctd>If set, fixed; \u003Cstrong>if omitted, inherits request Host port\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>path\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>If set, prefix + sub-paths only; if omitted, whole host\u003C\u002Ftd>\n\u003Ctd>May differ from Pattern for path rewrite\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>scheme\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd>If \u003Ccode>http:\u002F\u002F\u003C\u002Fcode> \u002F \u003Ccode>https:\u002F\u002F\u003C\u002Fcode> set, must match request\u003C\u002Ftd>\n\u003Ctd>Use \u003Ccode>http:\u002F\u002F\u003C\u002Fcode> when pointing at local HTTP\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>\u003Cstrong>Priority:\u003C\u002Fstrong> Longest path prefix wins; same path, rules with explicit port rank higher.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Path rewrite\u003C\u002Fstrong> (advanced):\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">a.example.com\u002Froute1\u002Froute2    b.example.com\u002Froute1\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Request \u003Ccode>\u002Froute1\u002Froute2\u002Forders\u002Flist\u003C\u002Fcode> → upstream \u003Ccode>\u002Froute1\u002Forders\u002Flist\u003C\u002Fcode> (strip match prefix, append remainder to target prefix).\u003C\u002Fp>\n\u003Cp>CONNECT tunnels use \u003Cstrong>host-only\u003C\u002Fstrong> rules (no path); path rules apply to HTTP(S) only.\u003C\u002Fp>\n\u003Ch2>Same Chain as Capture and Page Debug\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Forward Rules\u003C\u002Fstrong> change only the proxy upstream target—they \u003Cstrong>do not change the URL the browser sends\u003C\u002Fstrong>. The capture list still shows the client's Host and path. So:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Mock still matches URLs as shown in capture;\u003C\u002Fli>\n\u003Cli>Taps in \u003Ca href=\"\u002Fen\u002Fdocs\u002Fdebug-replay\u002F\">mobile web debugging\u003C\u002Fa> go through the same forwarding;\u003C\u002Fli>\n\u003Cli>With \u003Ca href=\"\u002Fen\u002Fdocs\u002Fparam-transform\u002F\">Param Transform\u003C\u002Fa>: forward to test env → decrypt → Mock errors.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Typical \u003Cstrong>API integration\u003C\u002Fstrong> flow: \u003Cstrong>Forward Rules (right service) → Param Transform (plaintext) → Mock (edge cases)\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Ch2>Troubleshooting\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Orders still 501\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Are Forward Rules saved and not commented out (leading \u003Ccode>#\u003C\u002Fcode>)?\u003C\u002Fli>\n\u003Cli>Is \u003Ca href=\"#prerequisites-proxy-certificate-system-proxy\">system proxy\u003C\u002Fa> on?\u003C\u002Fli>\n\u003Cli>Path correct? Orders are \u003Ccode>\u002Fapi\u002Forders\u002Flist\u003C\u002Fcode>—Pattern prefix must cover at least \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Local dev port: Pattern should include \u003Ccode>:3002\u003C\u002Fcode>, or Host must match the rule.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Profile \u002F stats broken too\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Host-level forward sends everything to b—ensure profile\u002Fstats work there, or use \u003Cstrong>path-level\u003C\u002Fstrong> forward for \u003Ccode>\u002Fapi\u002Forders\u003C\u002Fcode> only.\u003C\u002Fli>\n\u003Cli>Check hosts includes \u003Ccode>a.api.demo.test\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>No Forwarded URL in Overview\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>No rule matched, or target host:port equals original (treated as no forward). See \u003Ca href=\"\u002Fen\u002Fdocs\u002Ffaq\u002F\">FAQ\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Next\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>TBD: Breakpoints, resend, and collaboration on the proxy chain\u003C\u002Fstrong>—more integration tips.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>If you've hit \u003Cstrong>"backend moved, frontend hasn't shipped"\u003C\u002Fstrong> during joint debug, \u003Ca href=\"\u002F\">try DevPeek\u003C\u002Fa>: run this demo from Forward Rules through Mock without changing frontend code. Source: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek.demo\u002Ftree\u002Fmain\u002Fcases\u002Fmock-map-route-demo\">devpeek.demo \u002F mock-map-route-demo\u003C\u002Fa>. Share your \u003Cstrong>API host migration\u003C\u002Fstrong> setup on \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FGYPengDev\u002Fdevpeek\u002Fdiscussions\">GitHub Discussions\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Related Docs\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"\u002Fen\u002Fdocs\u002Fmap-route\u002F\">Forward Rules\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fen\u002Fdocs\u002Fmock\u002F\">Mock rules\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fen\u002Fdocs\u002Fcapture\u002F\">Capture and request details\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fen\u002Fdocs\u002Fproxy-ssl\u002F\">Proxy & SSL certificates\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"\u002Fen\u002Fdocs\u002Fquick-start\u002F\">Quick Start\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Series\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"\u002Fen\u002Fblog\u002Fapi-param-encryption-debug\u002F\">H5 API Encrypted? Decrypt It On the Fly with DevPeek\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n",{"items":14},[15,16,23,31,37,44],{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11},{"slug":17,"title":18,"summary":19,"date":20,"featured":8,"seoDescription":21,"series":10,"seriesOrder":22},"api-param-encryption-debug","H5 API Encrypted? Decrypt It On the Fly with DevPeek","Stuck with AES-encrypted API params during integration? Set the key and IV once in DevPeek Param Transform, and see plaintext automatically — you can even edit and re-encrypt on resend.","2026-07-18","Use DevPeek Param Transform to auto-decrypt AES-GCM encrypted H5 API requests. Supports two-way transform, plaintext editing, and debug replay.",1,{"slug":24,"title":25,"summary":26,"date":27,"featured":28,"seoDescription":29,"series":30,"seriesOrder":11},"h5-debug-console-mock","H5 Debug in Practice (2): Android WebView White Screen—From Console Remote Debug to Mock Validation","A campaign H5 white-screened on some Android devices after a button tap—all requests returned 200, but the page showed nothing. Using DevPeek Console to capture WebView runtime logs, remote eval to confirm a polyfill override, then Mock to verify the fallback UI under error conditions.","2026-07-13",true,"DevPeek H5 debug practice part 2: troubleshoot Android WebView white screen via Console remote debug to locate a JavaScript polyfill conflict, then use Mock to verify page fallback behavior under abnormal API responses.","h5-debug",{"slug":32,"title":33,"summary":34,"date":35,"featured":28,"seoDescription":36,"series":30,"seriesOrder":22},"wechat-h5-storage-debug","H5 Debug in Practice (1): WeChat H5 Local Cache—Debug It on Desktop","After switching test accounts in a WeChat official-account H5, the avatar still showed the old user—capture had the new token, stale data stayed in localStorage. This post walks through a real joint-debug case and how to view and edit localStorage, sessionStorage, and IndexedDB in WeChat WebView from your PC.","2026-07-11","DevPeek H5 debug: locate localStorage, sessionStorage, and IndexedDB cache issues in WeChat H5—compared with vConsole and remote debug, with real WebView debugging workflow.",{"slug":38,"title":39,"summary":40,"date":41,"featured":28,"seoDescription":42,"series":43,"seriesOrder":11},"why-we-built-devpeek-h5-debug","Why We Built DevPeek (2): That H5 Page in the App—Debug It on Your PC","Param transform fixed login, but the activity H5 only broke inside the App WebView. Remote debug and capture lived in different windows—so we folded mirroring and our own debug panels into DevPeek.","2026-07-10","DevPeek origin series, part 2: in-app H5 bugs that only show on real devices, the split between remote debug and capture, and how the Debug tab mirrors pages with built-in DOM, Console, and Network panels.","origin",{"slug":45,"title":46,"summary":47,"date":48,"featured":28,"seoDescription":49,"series":43,"seriesOrder":22},"why-we-built-devpeek","Why We Built DevPeek (1): HTTPS Decrypted, Body Still Gibberish","The night before a release, TLS was already open—but changing one request field still meant digging up encrypt\u002Fdecrypt scripts. That pushed us toward a proxy tool with business-layer crypto built in—and DevPeek started there.","2026-07-09","DevPeek origin series, part 1: the manual request-body encrypt\u002Fdecrypt grind—and why we set out to build a proxy tool that owns business-layer crypto.",1785001467825]