馃専 Chrome DevTools 涓冨ぇ鏂板姛鑳?/a>

Posted 2021-08-23 鐨皬铔?,

鑳屾櫙

Chrome 鍥㈤槦浠婂勾鍙戝竷浜嗕笉灏戞柊鐨勫姛鑳斤紝甯姪寮€鍙戣€呮彁鍗囩綉椤靛紑鍙戜綋楠屻€?/p>

鍦ㄦ渶杩戠殑 Google 寮€鍙戣€呭ぇ浼?/a>涓婏紝浠嬬粛浜嗘渶鏂扮殑涓冨ぇ鍔熻兘锛屽畠浠垎鍒槸:

1. 鏀彺css-in-js鐨勬鏋剁殑鏍峰紡缂栬緫
2. 妯℃嫙鏃跺尯鍔熻兘
3. Lighthouse 閲忓寲浣跨敤鑰呬綋楠?/li>
4. Issues 闈㈡澘
5. 濯掍綋闈㈡澘
6. 涓€浠朵慨澶嶆枃瀛楃殑鑹插僵瀵规瘮
7. 鍙婃椂妯℃嫙鑹茶闅滅

鎴戝湪鍛ㄦ湯鏁寸悊浜嗕竴涓嬭繖浜涘唴瀹癸紝 闈炲父璇︾粏銆?/p>

涓嬮潰鎴戜滑灏变竴璧锋潵涓湅鐪嬫瘡涓姛鑳界殑缁嗚妭鍚с€?/p>

姝ｆ枃

1. 鏀彺css-in-js鐨勬鏋剁殑鏍峰紡缂栬緫

鐪嬪埌杩欎釜鍔熻兘鐨勬椂鍊欙紝 浣犲彲鑳戒細濂藉锛?Chrome Devtool 涓嶆槸鏃╁氨鍙互缂栬緫css浜嗗悧锛?/p>

娌￠敊锛屼絾鏄師鏈敮鎸佺殑鏄€?鏅€氱殑css 銆? 涓嶆槸 銆宑ss-in-js銆?

鐜板湪锛屸€滄牱寮忊€濈獥鏍煎缂栬緫浣跨敤CSS瀵硅薄妯″瀷锛圕SSOM锛堿PI鍒涘缓鐨勬牱寮忔彁渚涗簡鏇村ソ鐨勬敮鎸?銆?/p>

璁稿 CSS-in-JS妗嗘灦鍜屽簱閮藉湪搴曞眰浣跨敤CSSOM API鏉ユ瀯閫犳牱寮忋€?/p>

渚嬪锛岋紙CSSOM API锛?code>h1娣诲姞鐨勬牱寮?code>CSSStyleSheet浠ュ墠涓嶅彲缂栬緫銆?/p>

鍥犱负瀹冩槸css-in-js鐨勪唬鐮併€?/p>

浣嗘槸鐜板湪鍙互鍦ㄢ€滄牱寮忊€濈獥鏍间腑杩涜缂栬緫浜嗭細

鍔ㄦ€佹紨绀猴細

2. 妯℃嫙鏃跺尯鍔熻兘

Chrome Devtool 鑳藉府浣犳ā鎷熸椂鍖猴紝 鏈変簡杩欎釜鍔熻兘锛?浣犲氨鑳藉緢鏂逛究鐨勬祴璇曞浗闄呭寲鐩稿叧鐨勪竴浜涘姛鑳姐€?/p>

姣斿锛?/p>

鍦ㄩ┈鏉ヨタ浜氱殑鏃堕棿鏄剧ず涓猴細

濡傛灉鎯崇湅鍦ㄤ鸡鏁︾殑鏃堕棿锛?灏卞彲浠ヤ慨鏀规帶鍒跺彴鐨勮缃负浼︽暒锛?/p>

鏄剧ず鐨勬椂闂村氨鏀逛负浼︽暒鏃堕棿浜嗭細

寰堟柟渚垮惂锝?/p>

寮€鍚繖涓潰鏉跨殑鏂规硶涓猴細

閫夋嫨location 灏卞彲浠ヤ簡锛?/p>

3. Lighthouse 閲忓寲浣跨敤鑰呬綋楠?/h2>

Lighthouse 鎺ㄥ嚭浜嗘柊鐨勪綋楠岄噺鍖栨柟寮忥細Core Web Vitals.

浣犲彲浠ユ墦寮€lightHouse 闈㈡澘锛?鐢熸垚鎶ュ憡鏉ユ煡鐪嬶細

绀轰緥锛?/p>

鎯宠浜嗚В鏇村鍏充簬 Core Web Vitals鐨勪俊鎭紝 鍙互鍏虫敞锛?/p>

web.dev/vitals

4. Issues 闈㈡澘

澶у鏄惁瀵瑰紑鍙戦潰鏉夸腑鐨勮鍛婁俊鎭劅鍒板帉鐑﹀憿锛?姣斿锛?/p>

鏂扮殑 Issues 鏍囩 鐨勪富瑕佺洰鐨勬槸锛?code>鏁村悎娴忚鍣紝 javascript 搴擄紝 妗嗘灦鐨勫悇绉嶈鍛婁笌寮傚父淇℃伅锛?缁欏ぇ瀹朵竴浜涗慨澶嶅缓璁€?/code>

鎵撳紑devtool, 鍒锋柊缃戦〉锛屽鏋滄湁璀﹀憡淇℃伅鐨勮瘽锛?浼氬彧鏄剧ず涓€鏉iew issues 閾炬帴锛?濡傚浘锛?/p>

鐐瑰嚮杩欎釜閾炬帴锛?鎵嶄細鐪嬪埌鍏ㄩ儴鐨?issues 鍒楄〃锛?涔熷彲浠ョ偣鍑诲叿浣撶殑鏌愪釜 issue 鏌ョ湅鍏蜂綋鐨勪俊鎭細

鏈変簡杩欎釜鍔熻兘锛?鏁翠釜闈㈡澘灏辨洿娓呯埥浜嗐€?/p>

5. 濯掍綋闈㈡澘

鏂扮殑濯掍綋闈㈡澘鎻愪緵浜嗕竴绔欏紡鐨勮祫婧愪笌淇℃伅锛?璁╀綘鑳芥洿蹇殑璋冭瘯濯掍綋闂銆?/p>

娴忚涓€涓湁瑙嗛娴佺殑缃戠珯锛?鎵撳紑濯掍綋闈㈢増锛?

鍙互鐪嬪埌涓嶅悓鐨勫垎绫伙紝姣忎竴涓被鍒笅鍖呭惈浜嗗叿浣撹缁嗙殑濯掍綋淇℃伅銆?/p>

浣犵敋鑷冲彲浠ヤ笅杞借棰戯紝鏇存柟渚跨殑鍘绘帓鏌ラ棶棰橈細

6. 涓€浠朵慨澶嶆枃瀛楃殑鑹插僵瀵规瘮

devtool 浼氭牴鎹綘鐨勮儗鏅笌瀛椾綋棰滆壊锛岃嚜鍔ㄦ彁渚涙枃瀛楃殑鑹插僵瀵规瘮寤鸿锛?姣斿锛?/p>

鎴戜滑鐪嬪埌锛?devtool 鎻愪緵浜?AA 涓?AAA 涓や釜鑹插僵寤鸿锛?浠绘剰鐐瑰嚮鍏朵腑涓€涓紝 灏辨槸淇鍚庣殑棰滆壊锛?/p>

鏄笉鏄緢妫掞綖

7. 鍙婃椂妯℃嫙鑹茶闅滅

浣犲彲浠ュ埄鐢?devtool 鏉ユā鎷熻瑙夐殰纰嶃€?/p>

鍦扮悆涓婂ぇ绾︽湁3浜夸汉鏈変笉鍚岀▼搴︾殑鑹茶闅滅

韬负缃戦〉寮€鍙戣€呯殑鎴戜滑锛?濡傛湁鑳芥湁宸ュ叿杈呭姪鎴戞垜浠湪寮€鍙戞椂鎵惧嚭鑹茶闅滅鐨勯棶棰橈紝 杩欎笉鏄緢濂藉悧锛?/p>

鍏堢粰澶у浠嬬粛涓€涓嬭瑙夐殰纰嶄笌鑹茶闅滅銆?/p>

瑙嗚闅滅鐨勪笉鍚岀被鍨嬶細

妯＄硦瑙嗙嚎

鍏ㄨ壊鐩?/h3>

绾㈣壊鐩?/h3>

鏈変簡瑙嗚妯℃嫙鐨勫姛鑳斤紝 灏卞彲浠ユ洿鏂归潰鐨勬垜浠幓璁剧疆鏃犻殰纰嶈祫婧愶紝 鏈夋晥鐨勬娴嬬綉椤电殑鑹插僵瀵规瘮搴︼細

杩欎釜鍔熻兘锛岃兘甯綘鏇村ソ鐨勫畬鍠勭綉椤电殑鏃犻殰纰嶈祫婧愶紝 鏀瑰杽鐢ㄦ埛浣撻獙銆?/p>

What\'s More

闄や簡浠ヤ笂杩欎簺锛?杩樻湁鏇村鐨勬柊鍔熻兘绛夊緟浣犲幓鎺㈢储锛?/p>

鎴虫垜鏌ョ湅鏇村鏂板姛鑳?->

绡囧箙鍏崇郴锛屽氨涓嶄竴涓€浠嬬粛銆?/p>

绂忓埄澶ф斁閫?/h2>

鎻愪緵涓€涓?google 鐮斿彂鐨勫崥瀹紝 涓嶅畾鏃跺彂甯冨紑鍙戝績寰椾笌鍒嗕韩锛?涓嶅閿欒繃锝烇綖

Google Dev Blog

鎬荤粨

鍐呭澶ф灏辫繖涔堝锛?甯屾湜瀵瑰ぇ瀹舵湁鎵€甯姪锝?/p>

---

濡傛灉浣犺寰楄繖绡囧唴瀹瑰浣犳尯鏈夊惎鍙戯紝鍙互锛?/p>

1. 鐐逛釜銆?strong>鍦ㄧ湅銆嶏紝璁╂洿澶氱殑浜轰篃鑳界湅鍒拌繖绡囧唴瀹广€?/li>
2. 鍏虫敞鍏紬鍙枫€?strong>鍓嶇e杩涢樁銆嶏紝鎺屾彙鍓嶇闈㈣瘯閲嶉毦鐐癸紝鍏紬鍙峰悗鍙板洖澶嶃€?strong>鍔犵兢銆嶅拰灏忎紮浼翠滑鐣呰亰鎶€鏈€?/li>