鑳屾櫙鍦ㄥ钩鏃剁殑寮€鍙戜腑锛屽揩閫熷畾浣嶅埌闇€姹傛墍鍦ㄧ殑浠ｇ爜鏂囦欢鏄緢甯歌鐨勩€備竴鑸潵璇达紝甯歌鐨勫畾浣嶆簮鐮佺殑鏂瑰紡鏈夛細鎼滅储椤甸潰鍏抽敭璇嶉〉闈㈣矾鐢盌evtool涓殑缁勪欢鍚嶇О濂借鎬ю煠繖浜涙柟娉曞線寰€鏁堢巼涓嶉珮锛屽彲鑳介渶瑕佸緢闀跨殑鎿嶄綔璺緞鎵嶈兘杈惧埌鐩殑锛屾瘮杈冮夯鐑︺€傚鏋滆兘鐩存帴鐐瑰嚮椤甸潰鎵撳紑浠ｇ爜鎵€鍦ㄧ殑鏂囦欢璇ュ濂斤紵浠婂ぉ鎴戜滑灏辨潵鎺㈣涓€涓嬶細濡備綍瀹炵幇涓€閿烦杞€備粖澶╃殑涓昏鍐呭锛氬浣曢厤缃甊eact椤圭洰濡備綍閰嶇疆Vue椤圭洰濡備綍閰嶇疆鐩稿叧鍘熺悊鎺㈢储姝ｆ枃濡備綍閰嶇疆React椤圭洰瀵逛簬React椤圭洰锛屾湁杩欎箞涓€涓彃浠讹細react-dev-inspector銆傚畠鐨勭濂囦箣澶勫湪浜庡彲浠ヤ粠椤甸潰涓瘑鍒嚭React缁勪欢锛屽苟鐩存帴璺宠浆鍒版湰鍦癐DE鐨勪唬鐮佺墖娈点€?.瀹夎npmi-Dreact-dev-inspector2銆傚紩鍏ュ埌瀵瑰簲鐨勭粍浠朵腑importReactfrom'react'import{Inspector,InspectParams}from'react-dev-inspector'constInspectorWrapper=process.env.NODE_ENV==='development'?妫€鏌ュ櫒锛歊eact.FragmentexportconstLayout=()=>{//...return({}}onClickElement={(params:InspectParams)=>{}}>//...)}babel閰嶇疆//babelrc.jsexportdefault{plugins:['react-dev-inspector/plugins/babel',],}webpack閰嶇疆//webpack.config.tsimporttype{Configuration}from'webpack'import{launchEditorMiddleware}from'react-dev-inspector/plugins/webpack'constconfig:Configuration={devServer:{before:(app)=>{app.use(launchEditorMiddleware)},},}鍙﹀杩欎釜鎻掍欢杩樻敮鎸乿ite://vite.config.ts:import{defineConfig}from'vite'import{inspectorServer}from'react-dev-inspector/plugins/vite'exportdefaultdefineConfig({plugins:[inspectorServer(),],})閰嶇疆缂栬緫鍣ㄦ槸涓嶅鐨勶紝姝ゆ椂鎵撳紑缂栬緫鍣ㄥ苟瀹氫綅鍒板叿浣撲綅缃紝鍥犱负缂栬緫鍣ㄦ棤娉曞湪鐜涓皟鍔ㄣ€傚湪vscode涓墽琛屼互涓嬫搷浣滄墦寮€vscode骞舵寜ctrl+shift+p锛岃緭鍏hell鍛戒护锛氬湪PATH涓€夋嫨install'code'鍛戒护銆傛偍鍙互浣跨敤window.__REACT_DEV_INSPECTOR_TOGGLE__()鏉ュ垏鎹㈡鏌ュ櫒銆傛偍涔熷彲浠ヤ娇鐢ㄦ鏂规硶鍒囨崲璋冭瘯妯″紡銆傛洿澶氶厤缃俊鎭鍙傝€冿細https://github.com/zthxxx/rea...Vue椤圭洰濡備綍閰嶇疆VueDevtools4.0鐗堟湰涔嬪悗锛屼篃鎻愪緵浜嗚繖鏍蜂竴涓姛鑳斤細涓€閿墦寮€缁勪欢涓殑缂栬緫婧愪唬鐮佹枃浠躲€傚疄鐜颁笂闈㈢殑devtool鍔熻兘閰嶇疆锛屽彧闇€瑕佺畝鍗曠殑涓夋锛?.瀹夎launch-editor-middlewarenpmi-Dlaunch-editor-middleware2銆傛洿鏀箇ebpackdevServer閰嶇疆constopenInEditor=require('launch-editor-middleware');module.exports={devServer:{before:(app){app.use('/__open-in-editor',openInEditor('code'));鍦╞efore鏂规硶涓紝涓篸evServer-editor鐨凥TTP璺敱娉ㄥ唽涓€涓?__open-in锛屽湪璺敱鐨勫洖璋冧腑閫氳繃launch-editor-middleware璋冪敤缂栬緫鍣ㄣ€俹penInEditor鏂规硶鐨勫弬鏁帮紝code琛ㄧず缂栬緫鍣ㄦ槸VSCode銆傛洿澶氭敮鎸佺殑缂栬緫鍣ㄥ拰鍙傛暟璇峰弬鑰冿細https://github.com/yyx990803/...3.灏嗙紪杈戝櫒鐨勮矾寰勬坊鍔犲埌鐜鍙橀噺PATH涓紝鍦≒ATH涓€夋嫨install'code'鍛戒护銆傜浉鍏冲師鐞嗘帰绱㈢瘒骞呮湁闄愩€備负浜嗘洿濂界殑闃呰浣撻獙锛屽叿浣撳師鐞嗗彲浠ュ弬鑰冧互涓嬫枃绔狅細馃帀鎴戠偣鍑讳簡椤甸潰涓婄殑鍏冪礌锛孷SCode灏变箹涔栫殑鎵撳紑浜嗙浉搴旂殑缁勪欢锛熷師鐞嗘彮鏅撱€俬ttps://juejin.cn/post/690146...鏈€鍚庯紝蹇€熷畾浣嶄唬鐮佹墍鍦ㄤ綅缃紝鍙互鍦ㄤ竴瀹氱▼搴︿笂鎻愰珮鎴戜滑鐨勫紑鍙戞晥鐜囷紝涓撴敞浜庢洿鏈変环鍊肩殑浜嬫儏銆?/p>
