{"id":30615,"date":"2021-08-28T18:42:10","date_gmt":"2021-08-28T10:42:10","guid":{"rendered":"https:\/\/web4theme.com\/?p=30615"},"modified":"2021-08-28T18:42:11","modified_gmt":"2021-08-28T10:42:11","slug":"chrome%e7%80%8f%e8%a6%bd%e5%99%a8f12%e7%b6%b2%e9%a0%81%e9%96%8b%e7%99%bc%e5%b7%a5%e5%85%b7%e6%95%99%e5%ad%b8","status":"publish","type":"post","link":"https:\/\/web4theme.com\/?p=30615","title":{"rendered":"Chrome\u700f\u89bd\u5668F12\u7db2\u9801\u958b\u767c\u5de5\u5177\u6559\u5b78"},"content":{"rendered":"\n<p>Chrome\u65e2\u662f\u4e00\u500b\u597d\u7528\u7684\u700f\u89bd\u5668\uff0c\u4e5f\u662f\u7db2\u9801\u958b\u767c\u54e1\u7684\u597d\u5de5\u5177\uff0c\u80fd\u5920\u6240\u898b\u5373\u6240\u5f97\u4fee\u6539\u7db2\u9801\uff0c\u53c8\u53ef\u4ee5\u8abf\u8a66\u8173\u672c\uff0c\u975e\u5e38\u65b9\u4fbf\uff0c\u80fd\u5920\u5f88\u597d\u63d0\u5347\u7db2\u9801\u8a2d\u8a08\u6548\u7387\u3002\u4e0b\u9762\u4ecb\u7d39\u5982\u4f55\u4f7f\u7528\u9019\u500b\u5de5\u5177\u3002<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/web4theme.com\/?p=30615\/#1%E5%A6%82%E4%BD%95%E8%AA%BF%E5%87%BA%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7\" title=\"1.\u5982\u4f55\u8abf\u51fa\u958b\u767c\u8005\u5de5\u5177\">1.\u5982\u4f55\u8abf\u51fa\u958b\u767c\u8005\u5de5\u5177<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/web4theme.com\/?p=30615\/#2%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%B7%A5%E5%85%B7%E5%90%84%E9%83%A8%E5%88%86%E4%BB%8B%E7%B4%B9\" title=\"2.\u7db2\u9801\u958b\u767c\u5de5\u5177\u5404\u90e8\u5206\u4ecb\u7d39\">2.\u7db2\u9801\u958b\u767c\u5de5\u5177\u5404\u90e8\u5206\u4ecb\u7d39<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/web4theme.com\/?p=30615\/#21_%E5%85%83%E7%B4%A0%EF%BC%88Elements%EF%BC%89\" title=\"2.1 \u5143\u7d20\uff08Elements\uff09\">2.1 \u5143\u7d20\uff08Elements\uff09<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/web4theme.com\/?p=30615\/#22_%E6%8E%A7%E5%88%B6%E5%8F%B0%EF%BC%88Console%EF%BC%89\" title=\"2.2 \u63a7\u5236\u53f0\uff08Console\uff09\">2.2 \u63a7\u5236\u53f0\uff08Console\uff09<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/web4theme.com\/?p=30615\/#23_%E6%BA%90%E4%BB%A3%E7%A2%BC%EF%BC%88Source%EF%BC%89\" title=\"2.3 \u6e90\u4ee3\u78bc\uff08Source\uff09\">2.3 \u6e90\u4ee3\u78bc\uff08Source\uff09<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/web4theme.com\/?p=30615\/#24_%E7%B6%B2%E7%B5%A1%EF%BC%88Network%EF%BC%89\" title=\"2.4 \u7db2\u7d61\uff08Network\uff09\">2.4 \u7db2\u7d61\uff08Network\uff09<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1%E5%A6%82%E4%BD%95%E8%AA%BF%E5%87%BA%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7\"><\/span>1.\u5982\u4f55\u8abf\u51fa\u958b\u767c\u8005\u5de5\u5177<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><br>\u8abf\u51faChrome\u7db2\u9801\u958b\u767c\u5de5\u5177\u67092\u500b\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<p>1.\u5728\u7db2\u9801\u6309\u9375\u76e4\u4e0a\u7684F12\uff08Windows\u8207Mac\u4e5f\u662f\u9019\u500b\u9375\uff09\u8abf\u51fa<br>2.\u5728\u7db2\u9801\u53f3\u9375\u83dc\u55ae\uff0c\u9078\u64c7Inspect<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"599\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-37.png\" alt=\"\" class=\"wp-image-30616\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-37.png 658w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-37-300x273.png 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><figcaption>\u53f3\u9375\u83dc\u55ae\u9078\u64c7Inspect<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"755\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-38-1024x755.png\" alt=\"\" class=\"wp-image-30617\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-38-1024x755.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-38-300x221.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-38-768x566.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-38.png 1294w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Chrome\u958b\u767c\u8005\u5de5\u5177\u6253\u958b\u7684\u6548\u679c<\/figcaption><\/figure>\n\n\n\n<p>\u4f8b\u5982\uff0c\u76f4\u63a5\u4fee\u6539\u7db2\u9801\u4e0a\u7684\u4efb\u4f55\u5167\u5bb9\uff0c\u9019\u88cf\u6f14\u793a\u4fee\u6539\u201cGoogle \u641c\u5c0b\u201d\u6309\u9215\u70ba\u201cWeb4Theme \u641c\u5c0b\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"942\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-42-1024x942.png\" alt=\"\" class=\"wp-image-30621\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-42-1024x942.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-42-300x276.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-42-768x707.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-42.png 1294w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u4fee\u6539\u7db2\u9801\u5143\u7d20\u5f8c\u7684\u6548\u679c<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%B7%A5%E5%85%B7%E5%90%84%E9%83%A8%E5%88%86%E4%BB%8B%E7%B4%B9\"><\/span>2.\u7db2\u9801\u958b\u767c\u5de5\u5177\u5404\u90e8\u5206\u4ecb\u7d39<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><br>chrome\u958b\u767c\u8005\u5de5\u5177\u6700\u5e38\u7528\u7684\u56db\u500b\u529f\u80fd\u6a21\u584a\uff1a\u5143\u7d20\uff08ELements\uff09\u3001\u63a7\u5236\u53f0\uff08Console\uff09\u3001\u6e90\u4ee3\u78bc\uff08Sources\uff09\uff0c\u7db2\u7d61\uff08Network\uff09\u3002<\/p>\n\n\n\n<p>\u5143\u7d20\uff08Elements\uff09\uff1a\u7528\u65bc\u67e5\u770b\u6216\u4fee\u6539HTML\u5143\u7d20\u7684\u5c6c\u6027\u3001CSS\u5c6c\u6027\u3001\u76e3\u807d\u4e8b\u4ef6\u3001\u65b7\u9ede\u7b49\u3002css\u53ef\u4ee5\u5373\u6642\u4fee\u6539\uff0c\u5373\u6642\u986f\u793a\u3002\u5927\u5927\u65b9\u4fbf\u4e86\u958b\u767c\u8005\u8abf\u8a66\u9801\u9762<\/p>\n\n\n\n<p>\u63a7\u5236\u53f0\uff08Console\uff09\uff1a\u63a7\u5236\u53f0\u4e00\u822c\u7528\u65bc\u57f7\u884c\u4e00\u6b21\u6027\u4ee3\u78bc\uff0c\u67e5\u770bJavaScript\u5c0d\u8c61\uff0c\u67e5\u770b\u8abf\u8a66\u65e5\u8a8c\u4fe1\u606f\u6216\u7570\u5e38\u4fe1\u606f\u3002\u9084\u53ef\u4ee5\u7576\u4f5cJavascript API\u67e5\u770b\u7528\u3002\u4f8b\u5982\u6211\u60f3\u67e5\u770bconsole\u90fd\u6709\u54ea\u4e9b\u65b9\u6cd5\u548c\u5c6c\u6027\uff0c\u6211\u53ef\u4ee5\u76f4\u63a5\u5728Console\u4e2d\u8f38\u5165&#8221;console&#8221;\u4e26\u57f7\u884c~<\/p>\n\n\n\n<p>\u6e90\u4ee3\u78bc\uff08Sources\uff09\uff1a\u8a72\u9801\u9762\u7528\u65bc\u67e5\u770b\u9801\u9762\u7684HTML\u6587\u4ef6\u6e90\u4ee3\u78bc\u3001JavaScript\u6e90\u4ee3\u78bc\u3001CSS\u6e90\u4ee3\u78bc\uff0c\u6b64\u5916\u6700\u91cd\u8981\u7684\u662f\u53ef\u4ee5\u8abf\u8a66JavaScript\u6e90\u4ee3\u78bc\uff0c\u53ef\u4ee5\u7d66JS\u4ee3\u78bc\u6dfb\u52a0\u65b7\u9ede\u7b49\u3002<\/p>\n\n\n\n<p>\u7db2\u7d61\uff08Network\uff09\uff1a\u7db2\u7d61\u9801\u9762\u4e3b\u8981\u7528\u65bc\u67e5\u770bheader\u7b49\u8207\u7db2\u7d61\u9023\u63a5\u76f8\u95dc\u7684\u4fe1\u606f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"21_%E5%85%83%E7%B4%A0%EF%BC%88Elements%EF%BC%89\"><\/span>2.1 \u5143\u7d20\uff08Elements\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u67e5\u770b\u5143\u7d20\u7684\u4ee3\u78bc\uff1a\u9ede\u64ca\u5de6\u4e0a\u89d2\u7684\u7bad\u982d\u5716\u6a19\u9032\u5165\u9078\u64c7\u5143\u7d20\u6a21\u5f0f\uff0c\u7136\u5f8c\u5f9e\u9801\u9762\u4e2d\u9078\u64c7\u9700\u8981\u67e5\u770b\u7684\u5143\u7d20\uff0c\u7136\u5f8c\u53ef\u4ee5\u5728\u958b\u767c\u8005\u5de5\u5177\u5143\u7d20\uff08Elements\uff09\u4e00\u6b04\u4e2d\u5b9a\u4f4d\u5230\u8a72\u5143\u7d20\u6e90\u4ee3\u78bc\u7684\u5177\u9ad4\u4f4d\u7f6e<\/p>\n\n\n\n<p>\u67e5\u770b\u5143\u7d20\u7684CSS\u5c6c\u6027\uff1a\u5728\u5143\u7d20\u7684\u53f3\u908a\u6b04\u4e2d\u7684styles\u9801\u9762\u53ef\u4ee5\u67e5\u770b\u8a72\u5143\u7d20\u7684CSS\u5c6c\u6027\uff0c\u9019\u500b\u9801\u9762\u5c55\u793a\u8a72\u5143\u7d20\u539f\u59cb\u5b9a\u7fa9\u7684CSS\u5c6c\u6027\u4ee5\u53ca\u5f9e\u7236\u7d1a\u5143\u7d20\u7e7c\u627f\u7684CSS\u5c6c\u6027\u3002\u5f9e\u9019\u500b\u9801\u9762\u9084\u53ef\u4ee5\u67e5\u5230\u8a72\u5143\u7d20\u7684\u67d0\u500bCSS\u7279\u6027\u4f86\u81ea\u65bc\u90a3\u500bCSS\u6587\u4ef6\uff0c\u4f7f\u7de8\u78bc\u8abf\u8a66\u6642\u4fee\u6539\u4ee3\u78bc\u8b8a\u5f97\u975e\u5e38\u65b9\u4fbf\u3002<\/p>\n\n\n\n<p>\u5982\u4e0b\u5716\u4e2d\u7684class\u3001src\u3001width\u7b49\u5c6c\u6027\u7684\u503c\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"370\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-43-1024x370.png\" alt=\"\" class=\"wp-image-30622\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-43-1024x370.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-43-300x108.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-43-768x278.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-43.png 1289w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u67e5\u770b\u9078\u4e2d\u5143\u7d20\u7684css\u5c6c\u6027<\/figcaption><\/figure>\n\n\n\n<p>\u7576\u7136\u5f9e\u6e90\u4ee3\u78bc\u4e2d\u8b80\u5230\u7684\u53ea\u662f\u4e00\u90e8\u5206\u986f\u5f0f\u8072\u660e\u7684\u5c6c\u6027\u5728Styles\u9801\u65c1\u908a\uff0c\u6709\u4e00\u500bComputed\u9801\u9762\uff0c\u9019\u500b\u9801\u9762\u5c55\u793a\u8a72\u5143\u7d20\u7d93\u904e\u8a08\u7b97\u4e4b\u5f8c\u7684\u6240\u6709CSS\u5c6c\u6027\uff0c\u5373\u6700\u5f8c\u700f\u89bd\u5668\u6e32\u67d3\u9801\u9762\u6642\u4f7f\u7528\u7684\u5c6c\u6027\u3002\u5c6c\u6027\u7684\u8a08\u7b97\u7531\u700f\u89bd\u5668\u81ea\u52d5\u9032\u884c\uff0c\u662f\u700f\u89bd\u5668\u6e32\u67d3\u9801\u9762\u7684\u4e00\u500b\u5fc5\u4e0d\u53ef\u5c11\u7684\u904e\u7a0b\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"380\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-44-1024x380.png\" alt=\"\" class=\"wp-image-30623\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-44-1024x380.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-44-300x111.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-44-768x285.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-44.png 1281w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u67e5\u770b\u5143\u7d20\u6b63\u5728\u4f7f\u7528\u7684CSS<\/figcaption><\/figure>\n\n\n\n<p>\u4fee\u6539\u5143\u7d20\u7684\u4ee3\u78bc\u8207\u5c6c\u6027\uff1a\u9ede\u64ca\u5143\u7d20\uff0c\u7136\u67e5\u770b\u53f3\u9375\u83dc\u55ae\uff0c\u53ef\u4ee5\u770b\u5230chrome\u63d0\u4f9b\u7684\u53ef\u5c0d\u5143\u7d20\u9032\u884c\u7684\u64cd\u4f5c\uff1a\u5305\u62ec\u7de8\u8f2f\u5143\u7d20\u4ee3\u78bc\uff08Edit as HTML\uff09\u3001\u4fee\u6539\u5c6c\u6027\uff08Add attribute\u3001Edit attribute\uff09\u7b49\u3002\u9078\u64c7Edit as HTML\u9078\u9805\u6642\uff0c\u5143\u7d20\u9032\u5165\u7de8\u8f2f\u6a21\u5f0f\uff0c\u53ef\u4ee5\u5c0d\u5143\u7d20\u7684\u4ee3\u78bc\u9032\u884c\u4efb\u610f\u7684\u4fee\u6539\u3002\u7576\u7136\uff0c\u9019\u500b\u4fee\u6539\u4e5f\u50c5\u5c0d\u7576\u524d\u7684\u9801\u9762\u6e32\u67d3\u751f\u6548\uff0c\u4e0d\u6703\u4fee\u6539\u670d\u52d9\u5668\u7684\u6e90\u4ee3\u78bc\uff0c\u6545\u800c\u9019\u500b\u529f\u80fd\u4e5f\u662f\u4f5c\u70ba\u8abf\u8a66\u9801\u9762\u6548\u679c\u800c\u4f7f\u7528\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-45-1024x510.png\" alt=\"\" class=\"wp-image-30624\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-45-1024x510.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-45-300x149.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-45-768x382.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-45.png 1241w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u4fee\u6539\u9078\u4e2d\u5143\u7d20\u7684\u5167\u5bb9<\/figcaption><\/figure>\n\n\n\n<p>\u4fee\u6539\u5143\u7d20\u7684CSS\u5c6c\u6027\uff1a\u5728\u5143\u7d20\u7684Styles\u9801\u9762\uff0c\u53ef\u4ee5\u5c0d\u5143\u7d20\u7684CSS\u5c6c\u6027\u9032\u884c\u4fee\u6539\uff0c\u751a\u81f3\u522a\u9664\u539f\u6709\u3001\u6dfb\u52a0\u65b0\u5c6c\u6027\u3002\u4e0d\u904e\uff0c\u9019\u4e9b\u4fee\u6539\uff0c\u50c5\u5c0d\u7576\u524d\u700f\u89bd\u5668\u7684\u9801\u9762\u5c55\u793a\u751f\u6548\uff0c\u4e0d\u6703\u4fee\u6539CSS\u6e90\u4ee3\u78bc\u3002\u6240\u4ee5\u5728\u9019\u88e1\u9032\u884cCSS\u5c6c\u6027\u7684\u4fee\u6539\u4e00\u822c\u7528\u4f86\u8abf\u6574\u548c\u5b8c\u5584\u5143\u7d20\u7684\u6e32\u67d3\u6548\u679c\u3002<\/p>\n\n\n\n<p>\u7d66\u5143\u7d20\u6dfb\u52a0\u65b7\u9ede\uff1a\u5728\u5143\u7d20\u7684\u53f3\u9375\u83dc\u55ae\u4e2d\u9078\u64c7\u65b7\u9ede\u9078\u9805\uff08Break on\u2026\uff09\uff0c\u9078\u4e2d\u4e4b\u5f8c\uff0c\u7576\u5143\u7d20\u88ab\u4fee\u6539\uff08\u901a\u5e38\u662f\u88abJS\u4ee3\u78bc\u4fee\u6539\uff09\u6642\uff0c\u9801\u9762\u52a0\u8f09\u6703\u66ab\u505c\uff0c\u7136\u5f8c\u53ef\u4ee5\u67e5\u770b\u8a72\u5143\u7d20\u7684\u5c6c\u6027\u3002<\/p>\n\n\n\n<p>\u5143\u7d20\u65b7\u9ede\u6dfb\u52a0\u4e4b\u5f8c\uff0c\u53ef\u4ee5\u5728\u53f3\u5074\u6b04\u7684DOM Breakpoints\u9801\u9762\u4e2d\u770b\u5230\uff0c\u9019\u500b\u9801\u9762\u53ef\u4ee5\u770b\u5230\u7576\u524d\u7db2\u9801\u7684\u6240\u6709\u5143\u7d20\u65b7\u9ede\u3002<\/p>\n\n\n\n<p>\u67e5\u770b\u5143\u7d20\u7684\u76e3\u807d\u4e8b\u4ef6\uff1a\u5143\u7d20\u7684\u53f3\u908a\u6b04\u7684Event Listener\u9801\u9762\uff0c\u53ef\u4ee5\u67e5\u770b\u5230\u8a72\u5143\u7d20\u7684\u6240\u6709\u76e3\u807d\u4e8b\u4ef6\u3002\u5728\u958b\u767c\u4e2d\uff0c\u5c24\u5176\u662f\u7dad\u8b77\u5176\u4ed6\u4eba\u7684\u4ee3\u78bc\u6642\uff0c\u6703\u51fa\u73fe\u4e0d\u77ad\u89e3\u5143\u7d20\u5c0d\u61c9\u7684\u76e3\u807d\u4e8b\u4ef6\uff0c\u9019\u500b\u6642\u5019\uff0c\u53ef\u4ee5\u5728\u9019\u500b\u9801\u9762\u4e2d\u627e\u5230\u3002\u9019\u500b\u9801\u9762\u4e0d\u50c5\u80fd\u770b\u5230\u5c0d\u61c9\u7684\u4e8b\u4ef6\u51fd\u6578\uff0c\u9084\u53ef\u4ee5\u5b9a\u4f4d\u8a72\u51fd\u6578\u6240\u5728\u7684JS\u6587\u4ef6\u4ee5\u53ca\u5728\u8a72\u6587\u4ef6\u4e2d\u7684\u5177\u9ad4\u4f4d\u7f6e\uff08\u884c\u6578\uff09\uff0c\u5927\u5927\u63d0\u9ad8\u958b\u767c\u7dad\u8b77\u7684\u6548\u7387\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"22_%E6%8E%A7%E5%88%B6%E5%8F%B0%EF%BC%88Console%EF%BC%89\"><\/span>2.2 \u63a7\u5236\u53f0\uff08Console\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><br>Console\u53ef\u4ee5\u67e5\u770bJS\u5c0d\u8c61\u7684\u53ca\u5176\u5c6c\u6027\uff0c\u901a\u904ejs\u8a2a\u554f\u7576\u524d\u9801\u9762\u7684\u6240\u6709\u5143\u7d20\u53ca\u9032\u884cjs\u7684\u4efb\u4f55\u64cd\u4f5c\uff0c\u4e26\u4e14\u80fd\u5920\u7acb\u5373\u57f7\u884cJS\u8a9e\u53e5\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"674\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-47-1024x674.png\" alt=\"\" class=\"wp-image-30626\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-47-1024x674.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-47-300x197.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-47-768x506.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-47.png 1153w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Console\u5373\u6642\u57f7\u884cjavascript<\/figcaption><\/figure>\n\n\n\n<p>\u67e5\u770b\u63a7\u5236\u53f0\u65e5\u8a8c\uff1a\u7576\u7db2\u9801\u7684JS\u4ee3\u78bc\u4e2d\u4f7f\u7528\u4e86console.log()\u51fd\u6578\u6642\uff0c\u8a72\u51fd\u6578\u8f38\u51fa\u7684\u65e5\u8a8c\u4fe1\u606f\u6703\u5728\u63a7\u5236\u53f0\u4e2d\u986f\u793a\u3002\u65e5\u8a8c\u4fe1\u606f\u4e00\u822c\u5728\u958b\u767c\u8abf\u8a66\u6642\u5553\u7528\uff0c\u800c\u7576\u6b63\u5f0f\u4e0a\u7dda\u5f8c\uff0c\u4e00\u822c\u6703\u5c07\u8a72\u51fd\u6578\u53bb\u6389<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"23_%E6%BA%90%E4%BB%A3%E7%A2%BC%EF%BC%88Source%EF%BC%89\"><\/span>2.3 \u6e90\u4ee3\u78bc\uff08Source\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><br>\u67e5\u770b\u6587\u4ef6\uff1a\u5728\u6e90\u4ee3\u78bc\uff08Source\uff09\u9801\u9762\u53ef\u4ee5\u67e5\u770b\u5230\u7576\u524d\u7db2\u9801\u7684\u6240\u6709\u6e90\u6587\u4ef6\u3002\u5728\u5de6\u5074\u6b04\u4e2d\u53ef\u4ee5\u770b\u5230\u6e90\u6587\u4ef6\u4ee5\u6a39\u7d50\u69cb\u9032\u884c\u5c55\u793a\u3002<br>\u6dfb\u52a0\u65b7\u9ede\uff1a\u5728\u6e90\u4ee3\u78bc\u5de6\u908a\u6709\u884c\u865f\uff0c\u9ede\u64ca\u5c0d\u61c9\u884c\u7684\u884c\u865f\uff0c\u5c31\u597d\u7d66\u6539\u884c\u6dfb\u52a0\u4e0a\u4e00\u500b\u65b7\u9ede\uff08\u518d\u6b21\u9ede\u64ca\u53ef\u522a\u9664\u65b7\u9ede\uff09\u3002\u53f3\u9375\u9ede\u64ca\u65b7\u9ede\uff0c\u5728\u5f48\u51fa\u7684\u83dc\u55ae\u4e2d\u9078\u64c7Edit breakpoint\u53ef\u4ee5\u7d66\u8a72\u65b7\u7684\u6dfb\u52a0\u4e2d\u65b7\u689d\u4ef6\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"893\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-48-1024x893.png\" alt=\"\" class=\"wp-image-30627\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-48-1024x893.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-48-300x262.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-48-768x670.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-48.png 1186w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u4e2d\u65b7\u8abf\u8a66\uff1a\u6dfb\u52a0\u65b7\u9ede\u5f8c\uff0c\u7576JS\u4ee3\u78bc\u904b\u884c\u5230\u65b7\u9ede\u6642\u6703\u4e2d\u65b7\uff08\u5c0d\u65bc\u6dfb\u52a0\u4e86\u4e2d\u65b7\u689d\u4ef6\u7684\u65b7\u9ede\u5728\u7b26\u5408\u689d\u4ef6\u6642\u4e2d\u65b7\uff09\uff0c\u6b64\u6642\u53ef\u4ee5\u5c07\u5149\u6a19\u653e\u5728\u8b8a\u91cf\u4e0a\u67e5\u770b\u8b8a\u91cf\u7684<\/p>\n\n\n\n<p>\u4e5f\u53ef\u4ee5\u5728\u53f3\u908a\u7684\u5074\u6b04\u4e0a\u67e5\u770b\uff1a<\/p>\n\n\n\n<p>\u5728\u53f3\u5074\u8b8a\u91cf\u4e0a\u65b9\uff0c\u6709\u7e7c\u7e8c\u904b\u884c\u3001\u55ae\u6b65\u8df3\u904e\u7b49\u6309\u9215\uff0c\u53ef\u4ee5\u5728\u7576\u524d\u65b7\u9ede\u5f8c\uff0c\u9010\u884c\u904b\u884c\u4ee3\u78bc\uff0c\u6216\u8005\u76f4\u63a5\u8b93\u5176\u7e7c\u7e8c\u904b\u884c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"24_%E7%B6%B2%E7%B5%A1%EF%BC%88Network%EF%BC%89\"><\/span>2.4 \u7db2\u7d61\uff08Network\uff09<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u7db2\u7d61\u80fd\u5920\u8a18\u9304\u6240\u6709\u8acb\u6c42\uff0c\u4e26\u4e14\u9032\u884c\u56de\u653e\uff0c\u53e6\u5b58\u70ba\u6587\u4ef6\u9032\u884c\u5206\u6790\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"893\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-49-1024x893.png\" alt=\"\" class=\"wp-image-30628\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-49-1024x893.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-49-300x262.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-49-768x670.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-49.png 1186w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u7db2\u7d61\u9762\u677f<\/figcaption><\/figure>\n\n\n\n<p>\u7d05\u8272\u5713\u578b\uff1a\u8a18\u9304\u6309\u9215 \u8655\u65bc\u6253\u958b\u72c0\u614b\u6642\u6703\u5728\u6b64\u9762\u677f\u9032\u884c\u7db2\u7d61\u9023\u63a5\u7684\u4fe1\u606f\u8a18\u9304\uff0c\u95dc\u9589\u5f8c\u5247\u4e0d\u6703\u8a18\u9304\u3002<\/p>\n\n\n\n<p>\u5713\u88cf\u9762\u6709\u659c\u7dda\uff1a\u6e05\u9664\u6309\u9215 \u6e05\u9664\u7576\u524d\u7684\u7db2\u7d61\u9023\u63a5\u8a18\u9304\u4fe1\u606f\u3002\uff08\u9ede\u64ca\u4e00\u4e0b\u5c31\u80fd\u6e05\u7a7a\uff09<\/p>\n\n\n\n<p>\u4e0b\u9762\u7684\u904e\u6ffe\u5668\uff08Filter\uff09 \u80fd\u5920\u81ea\u5b9a\u7fa9\u7be9\u9078\u689d\u4ef6\uff0c\u627e\u5230\u81ea\u5df1\u60f3\u8981\u8cc7\u6e90\u4fe1\u606f\uff0c\u5982\u4e0b\u5716\u6240\u793a\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"445\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-50-1024x445.png\" alt=\"\" class=\"wp-image-30629\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-50-1024x445.png 1024w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-50-300x130.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-50-768x334.png 768w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-50.png 1165w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u4e5f\u53ef\u4ee5\u662f\u4e00\u4e9b\u6307\u5b9a\u689d\u4ef6<br>\u6307\u5b9a\u689d\u4ef6\u6709\u54ea\u4e9b\uff1f<\/p>\n\n\n\n<p>domain\uff1a\u8cc7\u6e90\u6240\u5728\u7684\u57df\uff0c\u5373url\u4e2d\u7684\u57df\u540d\u90e8\u5206\u3002\u5982 domain:api.github.com<\/p>\n\n\n\n<p>has-response-header\uff1a\u8cc7\u6e90\u662f\u5426\u5b58\u5728\u97ff\u61c9\u982d\uff0c\u7121\u8ad6\u5176\u503c\u662f\u4ec0\u9ebc\u3002\u5982 has-response-header\uff1aAccess-Control-Allow-Origin<\/p>\n\n\n\n<p>is\uff1a\u7576\u524d\u6642\u9593\u9ede\u5728\u57f7\u884c\u7684\u8acb\u6c42\u3002\u7576\u524d\u53ef\u7528\u503c\uff1arunning<\/p>\n\n\n\n<p>larger-than\uff1a\u986f\u793a\u5927\u65bc\u6307\u5b9a\u503c\u5927\u5c0f\u898f\u683c\u7684\u8cc7\u6e90\u3002\u55ae\u4f4d\u662f\u5b57\u7bc0(B),\u4f46\u662fK(kB)\u548cM(MB)\u4e5f\u662f\u53ef\u4ee5\u7684~ \u5982larger-than:150K<\/p>\n\n\n\n<p>method\uff1a\u4f7f\u7528\u4f55\u7a2eHTTP\u8acb\u6c42\u65b9\u5f0f\u3002\u5982 GET<\/p>\n\n\n\n<p>mime-type\uff1a\u4e5f\u5beb\u4f5ccontent-type\uff0c\u662f\u8cc7\u6e90\u985e\u578b\u7684\u6a19\u8b58\u7b26\u3002\u5982 text\/html<\/p>\n\n\n\n<p>scheme\uff1a\u5354\u8b70\u898f\u5b9a\u3002\u5982 HTTPS<\/p>\n\n\n\n<p>set-cookie-name\uff1a\u670d\u52d9\u5668\u8a2d\u7f6e\u7684cookies\u540d\u7a31<\/p>\n\n\n\n<p>set-cookie-value\uff1a\u670d\u52d9\u5668\u8a2d\u7f6e\u7684cookies\u7684\u503c<\/p>\n\n\n\n<p>set-cookie-domain\uff1a\u670d\u52d9\u5668\u8a2d\u7f6e\u7684cookies\u7684\u57df<\/p>\n\n\n\n<p>status-code\uff1aHTTP\u97ff\u61c9\u982d\u7684\u72c0\u614b\u78bc<\/p>\n\n\n\n<p>Preserve log\uff1a\u662f\u5426\u4fdd\u7559\u65e5\u8a8c<\/p>\n\n\n\n<p>\u7576\u9078\u64c7\u4fdd\u7559\u65e5\u8a8c\uff0c\u91cd\u65b0\u52a0\u8f09url\u7576\u524d\u754c\u9762\u6642\uff0c\u4e4b\u524d\u8acb\u6c42\u986f\u793a\u7684\u8cc7\u6e90\u4fe1\u606f\uff0c\u6703\u4fdd\u7559\u4e0b\u4f86\uff0c\u4e0d\u6703\u6e05\u7a7a\u7684\u55b2~<\/p>\n\n\n\n<p>Disable cache\uff1a\u662f\u5426\u9032\u884c\u7de9\u5b58<\/p>\n\n\n\n<p>\u7576\u6253\u958b\u958b\u767c\u8005\u5de5\u5177\u6642\u751f\u6548\uff0c\u6253\u958b\u9019\u500b\u958b\u95dc\uff0c\u5247\u9801\u9762\u8cc7\u6e90\u4e0d\u6703\u5b58\u5165\u7de9\u5b58\uff0c\u53ef\u4ee5\u5f9eStatus\u6b04\u7684\u72c0\u614b\u78bc\u770b\u6587\u4ef6\u8acb\u6c42\u72c0\u614b\u3002<\/p>\n\n\n\n<p>No throttling\uff1a\u8a2d\u7f6e\u6a21\u64ec\u9650\u901f\uff0c\u5982\u4e0b\u5716\u6240\u793a\u3002<\/p>\n\n\n\n<p>\u8a2d\u7f6e\u9650\u901f\u53ef\u4ee5\u6a21\u64ec\u8655\u65bc\u5404\u7a2e\u7db2\u7d61\u74b0\u5883\u4e0b\u7684\u4e0d\u540c\u7528\u6236\u8a2a\u554f\u672c\u9801\u9762\u7684\u60c5\u6cc1\u3002<\/p>\n\n\n\n<p>Network\u4e3b\u984c\u5167\u5bb9\u4ecb\u7d39<\/p>\n\n\n\n<p>\u4e0b\u5217\u4ecb\u7d39\u4e2d\uff0c\u524d\u8005\u70ba\u540d\u8a5e\u89e3\u91cb\uff0c\u5f8c\u8005\u70ba\u8209\u4f8b<\/p>\n\n\n\n<p>Name\uff1a\u8cc7\u6e90\u540d\u7a31\u4ee5\u53caURL\u8def\u5f91 \uff08www.facebook.com\uff09<\/p>\n\n\n\n<p>Method\uff1aHttp\u8acb\u6c42\u65b9\u6cd5 (GET\u6216\u8005POST)<\/p>\n\n\n\n<p>status\uff1aHttp\u72c0\u614b\u78bc\/\u6587\u5b57\u89e3\u91cb \uff08200\uff0cok\uff09<\/p>\n\n\n\n<p>Type \uff1a\u8acb\u6c42\u8cc7\u6e90\u7684MIME\u985e\u578b\uff0cMIME\u662fMultipurpose Internet Mail Extensions (html,css,js\u7b49)<\/p>\n\n\n\n<p>Initiator\uff1a\u89e3\u91cb\u8acb\u6c42\u662f\u600e\u9ebc\u767c\u8d77\u7684\uff0c\u6709\u56db\u7a2e\u53ef\u80fd\u7684\u503c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">   1.Parser  \uff1a\u8acb\u6c42\u662f\u7531\u9801\u9762\u7684html\u89e3\u6790\u6642\u767c\u9001\n   2.Redirect\uff1a\u8acb\u6c42\u662f\u7531\u9801\u9762\u91cd\u5b9a\u5411\u767c\u9001\n   3.script  \uff1a\u8acb\u6c42\u662f\u7531script\u8173\u672c\u8655\u7406\u9aee\u9001\n   4.other   \uff1a\u8acb\u6c42\u662f\u7531\u5176\u4ed6\u904e\u7a0b\u767c\u9001\u7684\uff0c\u6bd4\u5982\u9801\u9762\u91cc\u7684Link\u93c8\u63a5\u9ede\u64ca<\/code><\/pre>\n\n\n\n<p>size\/content\uff1asize\u662f\u97ff\u61c9\u982d\u90e8\u548c\u97ff\u61c9\u9ad4\u7d50\u5408\u7684\u5927\u5c0f\uff0ccontent\u662f\u8acb\u6c42\u89e3\u78bc\u5f8c\u7684\u5927\u5c0f<\/p>\n\n\n\n<p><br>\u5c0d\u67d0\u8acb\u6c42\u53f3\u9375\uff0c\u51fa\u73fe\u9801\u9762\u5982\u4e0b\u5716\u6240\u793a\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"779\" height=\"498\" src=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-52.png\" alt=\"\" class=\"wp-image-30631\" srcset=\"https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-52.png 779w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-52-300x192.png 300w, https:\/\/web4theme.com\/wp-content\/uploads\/2021\/08\/image-52-768x491.png 768w\" sizes=\"auto, (max-width: 779px) 100vw, 779px\" \/><figcaption>\u9078\u4e2d1\u500b\u8acb\u6c42<\/figcaption><\/figure>\n\n\n\n<p>Copy Response\uff1a\u8907\u88fdHTTP\u97ff\u61c9\u5167\u5bb9\u5230\u7cfb\u7d71\u526a\u8cbc\u677f<\/p>\n\n\n\n<p>Copy<br>cURL\uff1a\u5c07\u7db2\u7d61\u8acb\u6c42\u4f5c\u70ba\u4e00\u500bcurl\u7684\u547d\u4ee4\u5b57\u7b26\u8907\u88fd\u5230\u7cfb\u7d71\u526a\u8cbc\u677f(curl\u662f\u4e00\u7a2e\u958b\u6e90\u7684\u547d\u4ee4\u884c\u5de5\u5177\u548c\u5eab\uff0c\u7528\u65bc\u914d\u5408url\u8a9e\u6cd5\u9032\u884c\u6578\u64da\u50b3\u8f38)<\/p>\n\n\n\n<p>Copy All as HAR\uff1a\u5c07\u7db2\u7d61\u8acb\u6c42\u8a18\u9304\u4fe1\u606f\u4ee5HAR\u683c\u5f0f\u8907\u88fd\u5230\u7cfb\u7d71\u526a\u8cbc\u677f(what is HAR file)<\/p>\n\n\n\n<p>Save as HAR with Content\uff1a\u5c07\u8cc7\u6e90\u7684\u6240\u6709\u7684\u7db2\u7d61\u4fe1\u606f\u4fdd\u5b58\u5230HAR\u6587\u4ef6\u4e2d(.har\u6587\u4ef6)<\/p>\n\n\n\n<p>Clear Browser Cache\uff1a\u6e05\u9664\u700f\u89bd\u5668\u7de9\u5b58<\/p>\n\n\n\n<p>Clear Browser Cookies\uff1a\u6e05\u9664\u700f\u89bd\u5668cookies<\/p>\n\n\n\n<p>Copy Link Address\uff1a\u8907\u88fd\u8cc7\u6e90url\u5230\u7cfb\u7d71\u526a\u8cbc\u677f<\/p>\n\n\n\n<p>\u4ee5\u4e0a\u5c31\u662fChrome F12\u7db2\u9801\u958b\u767c\u5de5\u5177\u7684\u4f7f\u7528\u4ecb\u7d39\uff0c\u6709\u4e0d\u6e05\u695a\u7684\u7559\u8a00\u54e6\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chrome\u65e2\u662f\u4e00\u500b\u597d\u7528\u7684\u700f\u89bd\u5668\uff0c\u4e5f\u662f\u7db2\u9801\u958b\u767c\u54e1\u7684\u597d\u5de5\u5177\uff0c\u80fd\u5920\u6240\u898b\u5373\u6240\u5f97\u4fee\u6539\u7db2\u9801\uff0c\u53c8\u53ef\u4ee5\u8abf\u8a66\u8173\u672c\uff0c\u975e\u5e38\u65b9\u4fbf\uff0c\u80fd\u5920\u5f88\u597d\u63d0\u5347\u7db2\u9801\u8a2d\u8a08\u6548\u7387\u3002\u4e0b\u9762\u4ecb\u7d39\u5982\u4f55\u4f7f\u7528\u9019\u500b\u5de5\u5177\u3002 1.\u5982\u4f55\u8abf\u51fa\u958b\u767c\u8005\u5de5\u5177 \u8abf\u51faChrome\u7db2\u9801\u958b\u767c\u5de5\u5177\u67092\u500b\u65b9\u6cd5\uff1a 1.\u5728\u7db2\u9801\u6309\u9375\u76e4\u4e0a\u7684F12\uff08Windows\u8207Mac\u4e5f\u662f\u9019\u500b\u9375\uff09\u8abf\u51fa2.\u5728\u7db2\u9801\u53f3\u9375\u83dc\u55ae\uff0c\u9078\u64c7Inspect \u4f8b\u5982\uff0c\u76f4\u63a5\u4fee\u6539\u7db2\u9801\u4e0a\u7684\u4efb\u4f55\u5167\u5bb9\uff0c\u9019\u88cf\u6f14\u793a\u4fee\u6539\u201cGoogle \u641c\u5c0b\u201d\u6309\u9215\u70ba\u201cWeb4Theme \u641c\u5c0b\u201d 2.\u7db2\u9801\u958b\u767c\u5de5\u5177\u5404\u90e8\u5206\u4ecb\u7d39 chrome\u958b\u767c\u8005\u5de5\u5177\u6700\u5e38\u7528\u7684\u56db\u500b\u529f\u80fd\u6a21\u584a\uff1a\u5143\u7d20\uff08ELements\uff09\u3001\u63a7\u5236\u53f0\uff08Console\uff09\u3001\u6e90\u4ee3\u78bc\uff08Sources\uff09\uff0c\u7db2\u7d61\uff08Network\uff09\u3002 \u5143\u7d20\uff08Elements\uff09\uff1a\u7528\u65bc\u67e5\u770b\u6216\u4fee\u6539HTML\u5143\u7d20\u7684\u5c6c\u6027\u3001CSS\u5c6c\u6027\u3001\u76e3\u807d\u4e8b\u4ef6\u3001\u65b7\u9ede\u7b49\u3002css\u53ef\u4ee5\u5373\u6642\u4fee\u6539\uff0c\u5373\u6642\u986f\u793a\u3002\u5927\u5927\u65b9\u4fbf\u4e86\u958b\u767c\u8005\u8abf\u8a66\u9801\u9762 \u63a7\u5236\u53f0\uff08Console\uff09\uff1a\u63a7\u5236\u53f0\u4e00\u822c\u7528\u65bc\u57f7\u884c\u4e00\u6b21\u6027\u4ee3\u78bc\uff0c\u67e5\u770bJavaScript\u5c0d\u8c61\uff0c\u67e5\u770b\u8abf\u8a66\u65e5\u8a8c\u4fe1\u606f\u6216\u7570\u5e38\u4fe1\u606f\u3002\u9084\u53ef\u4ee5\u7576\u4f5cJavascript API\u67e5\u770b\u7528\u3002\u4f8b\u5982\u6211\u60f3\u67e5\u770bconsole\u90fd\u6709\u54ea\u4e9b\u65b9\u6cd5\u548c\u5c6c\u6027\uff0c\u6211\u53ef\u4ee5\u76f4\u63a5\u5728Console\u4e2d\u8f38\u5165&#8221;console&#8221;\u4e26\u57f7\u884c~ \u6e90\u4ee3\u78bc\uff08Sources\uff09\uff1a\u8a72\u9801\u9762\u7528\u65bc\u67e5\u770b\u9801\u9762\u7684HTML\u6587\u4ef6\u6e90\u4ee3\u78bc\u3001JavaScript\u6e90\u4ee3\u78bc\u3001CSS\u6e90\u4ee3\u78bc\uff0c\u6b64\u5916\u6700\u91cd\u8981\u7684\u662f\u53ef\u4ee5\u8abf\u8a66JavaScript\u6e90\u4ee3\u78bc\uff0c\u53ef\u4ee5\u7d66JS\u4ee3\u78bc\u6dfb\u52a0\u65b7\u9ede\u7b49\u3002 \u7db2\u7d61\uff08Network\uff09\uff1a\u7db2\u7d61\u9801\u9762\u4e3b\u8981\u7528\u65bc\u67e5\u770bheader\u7b49\u8207\u7db2\u7d61\u9023\u63a5\u76f8\u95dc\u7684\u4fe1\u606f\u3002 2.1 \u5143\u7d20\uff08Elements\uff09 \u67e5\u770b\u5143\u7d20\u7684\u4ee3\u78bc\uff1a\u9ede\u64ca\u5de6\u4e0a\u89d2\u7684\u7bad\u982d\u5716\u6a19\u9032\u5165\u9078\u64c7\u5143\u7d20\u6a21\u5f0f\uff0c\u7136\u5f8c\u5f9e\u9801\u9762\u4e2d\u9078\u64c7\u9700\u8981\u67e5\u770b\u7684\u5143\u7d20\uff0c\u7136\u5f8c\u53ef\u4ee5\u5728\u958b\u767c\u8005\u5de5\u5177\u5143\u7d20\uff08Elements\uff09\u4e00\u6b04\u4e2d\u5b9a\u4f4d\u5230\u8a72\u5143\u7d20\u6e90\u4ee3\u78bc\u7684\u5177\u9ad4\u4f4d\u7f6e \u67e5\u770b\u5143\u7d20\u7684CSS\u5c6c\u6027\uff1a\u5728\u5143\u7d20\u7684\u53f3\u908a\u6b04\u4e2d\u7684styles\u9801\u9762\u53ef\u4ee5\u67e5\u770b\u8a72\u5143\u7d20\u7684CSS\u5c6c\u6027\uff0c\u9019\u500b\u9801\u9762\u5c55\u793a\u8a72\u5143\u7d20\u539f\u59cb\u5b9a\u7fa9\u7684CSS\u5c6c\u6027\u4ee5\u53ca\u5f9e\u7236\u7d1a\u5143\u7d20\u7e7c\u627f\u7684CSS\u5c6c\u6027\u3002\u5f9e\u9019\u500b\u9801\u9762\u9084\u53ef\u4ee5\u67e5\u5230\u8a72\u5143\u7d20\u7684\u67d0\u500bCSS\u7279\u6027\u4f86\u81ea\u65bc\u90a3\u500bCSS\u6587\u4ef6\uff0c\u4f7f\u7de8\u78bc\u8abf\u8a66\u6642\u4fee\u6539\u4ee3\u78bc\u8b8a\u5f97\u975e\u5e38\u65b9\u4fbf\u3002 \u5982\u4e0b\u5716\u4e2d\u7684class\u3001src\u3001width\u7b49\u5c6c\u6027\u7684\u503c\u3002 \u7576\u7136\u5f9e\u6e90\u4ee3\u78bc\u4e2d\u8b80\u5230\u7684\u53ea\u662f\u4e00\u90e8\u5206\u986f\u5f0f\u8072\u660e\u7684\u5c6c\u6027\u5728Styles\u9801\u65c1\u908a\uff0c\u6709\u4e00\u500bComputed\u9801\u9762\uff0c\u9019\u500b\u9801\u9762\u5c55\u793a\u8a72\u5143\u7d20\u7d93\u904e\u8a08\u7b97\u4e4b\u5f8c\u7684\u6240\u6709CSS\u5c6c\u6027\uff0c\u5373\u6700\u5f8c\u700f\u89bd\u5668\u6e32\u67d3\u9801\u9762\u6642\u4f7f\u7528\u7684\u5c6c\u6027\u3002\u5c6c\u6027\u7684\u8a08\u7b97\u7531\u700f\u89bd\u5668\u81ea\u52d5\u9032\u884c\uff0c\u662f\u700f\u89bd\u5668\u6e32\u67d3\u9801\u9762\u7684\u4e00\u500b\u5fc5\u4e0d\u53ef\u5c11\u7684\u904e\u7a0b\u3002 \u4fee\u6539\u5143\u7d20\u7684\u4ee3\u78bc\u8207\u5c6c\u6027\uff1a\u9ede\u64ca\u5143\u7d20\uff0c\u7136\u67e5\u770b\u53f3\u9375\u83dc\u55ae\uff0c\u53ef\u4ee5\u770b\u5230chrome\u63d0\u4f9b\u7684\u53ef\u5c0d\u5143\u7d20\u9032\u884c\u7684\u64cd\u4f5c\uff1a\u5305\u62ec\u7de8\u8f2f\u5143\u7d20\u4ee3\u78bc\uff08Edit as HTML\uff09\u3001\u4fee\u6539\u5c6c\u6027\uff08Add attribute\u3001Edit attribute\uff09\u7b49\u3002\u9078\u64c7Edit as HTML\u9078\u9805\u6642\uff0c\u5143\u7d20\u9032\u5165\u7de8\u8f2f\u6a21\u5f0f\uff0c\u53ef\u4ee5\u5c0d\u5143\u7d20\u7684\u4ee3\u78bc\u9032\u884c\u4efb\u610f\u7684\u4fee\u6539\u3002\u7576\u7136\uff0c\u9019\u500b\u4fee\u6539\u4e5f\u50c5\u5c0d\u7576\u524d\u7684\u9801\u9762\u6e32\u67d3\u751f\u6548\uff0c\u4e0d\u6703\u4fee\u6539\u670d\u52d9\u5668\u7684\u6e90\u4ee3\u78bc\uff0c\u6545\u800c\u9019\u500b\u529f\u80fd\u4e5f\u662f\u4f5c\u70ba\u8abf\u8a66\u9801\u9762\u6548\u679c\u800c\u4f7f\u7528\u3002 \u4fee\u6539\u5143\u7d20\u7684CSS\u5c6c\u6027\uff1a\u5728\u5143\u7d20\u7684Styles\u9801\u9762\uff0c\u53ef\u4ee5\u5c0d\u5143\u7d20\u7684CSS\u5c6c\u6027\u9032\u884c\u4fee\u6539\uff0c\u751a\u81f3\u522a\u9664\u539f\u6709\u3001\u6dfb\u52a0\u65b0\u5c6c\u6027\u3002\u4e0d\u904e\uff0c\u9019\u4e9b\u4fee\u6539\uff0c\u50c5\u5c0d\u7576\u524d\u700f\u89bd\u5668\u7684\u9801\u9762\u5c55\u793a\u751f\u6548\uff0c\u4e0d\u6703\u4fee\u6539CSS\u6e90\u4ee3\u78bc\u3002\u6240\u4ee5\u5728\u9019\u88e1\u9032\u884cCSS\u5c6c\u6027\u7684\u4fee\u6539\u4e00\u822c\u7528\u4f86\u8abf\u6574\u548c\u5b8c\u5584\u5143\u7d20\u7684\u6e32\u67d3\u6548\u679c\u3002 \u7d66\u5143\u7d20\u6dfb\u52a0\u65b7\u9ede\uff1a\u5728\u5143\u7d20\u7684\u53f3\u9375\u83dc\u55ae\u4e2d\u9078\u64c7\u65b7\u9ede\u9078\u9805\uff08Break on\u2026\uff09\uff0c\u9078\u4e2d\u4e4b\u5f8c\uff0c\u7576\u5143\u7d20\u88ab\u4fee\u6539\uff08\u901a\u5e38\u662f\u88abJS\u4ee3\u78bc\u4fee\u6539\uff09\u6642\uff0c\u9801\u9762\u52a0\u8f09\u6703\u66ab\u505c\uff0c\u7136\u5f8c\u53ef\u4ee5\u67e5\u770b\u8a72\u5143\u7d20\u7684\u5c6c\u6027\u3002 \u5143\u7d20\u65b7\u9ede\u6dfb\u52a0\u4e4b\u5f8c\uff0c\u53ef\u4ee5\u5728\u53f3\u5074\u6b04\u7684DOM Breakpoints\u9801\u9762\u4e2d\u770b\u5230\uff0c\u9019\u500b\u9801\u9762\u53ef\u4ee5\u770b\u5230\u7576\u524d\u7db2\u9801\u7684\u6240\u6709\u5143\u7d20\u65b7\u9ede\u3002 \u67e5\u770b\u5143\u7d20\u7684\u76e3\u807d\u4e8b\u4ef6\uff1a\u5143\u7d20\u7684\u53f3\u908a\u6b04\u7684Event Listener\u9801\u9762\uff0c\u53ef\u4ee5\u67e5\u770b\u5230\u8a72\u5143\u7d20\u7684\u6240\u6709\u76e3\u807d\u4e8b\u4ef6\u3002\u5728\u958b\u767c\u4e2d\uff0c\u5c24\u5176\u662f\u7dad\u8b77\u5176\u4ed6\u4eba\u7684\u4ee3\u78bc\u6642\uff0c\u6703\u51fa\u73fe\u4e0d\u77ad\u89e3\u5143\u7d20\u5c0d\u61c9\u7684\u76e3\u807d\u4e8b\u4ef6\uff0c\u9019\u500b\u6642\u5019\uff0c\u53ef\u4ee5\u5728\u9019\u500b\u9801\u9762\u4e2d\u627e\u5230\u3002\u9019\u500b\u9801\u9762\u4e0d\u50c5\u80fd\u770b\u5230\u5c0d\u61c9\u7684\u4e8b\u4ef6\u51fd\u6578\uff0c\u9084\u53ef\u4ee5\u5b9a\u4f4d\u8a72\u51fd\u6578\u6240\u5728\u7684JS\u6587\u4ef6\u4ee5\u53ca\u5728\u8a72\u6587\u4ef6\u4e2d\u7684\u5177\u9ad4\u4f4d\u7f6e\uff08\u884c\u6578\uff09\uff0c\u5927\u5927\u63d0\u9ad8\u958b\u767c\u7dad\u8b77\u7684\u6548\u7387\u3002 2.2 \u63a7\u5236\u53f0\uff08Console\uff09 Console\u53ef\u4ee5\u67e5\u770bJS\u5c0d\u8c61\u7684\u53ca\u5176\u5c6c\u6027\uff0c\u901a\u904ejs\u8a2a\u554f\u7576\u524d\u9801\u9762\u7684\u6240\u6709\u5143\u7d20\u53ca\u9032\u884cjs\u7684\u4efb\u4f55\u64cd\u4f5c\uff0c\u4e26\u4e14\u80fd\u5920\u7acb\u5373\u57f7\u884cJS\u8a9e\u53e5\uff1a \u67e5\u770b\u63a7\u5236\u53f0\u65e5\u8a8c\uff1a\u7576\u7db2\u9801\u7684JS\u4ee3\u78bc\u4e2d\u4f7f\u7528\u4e86console.log()\u51fd\u6578\u6642\uff0c\u8a72\u51fd\u6578\u8f38\u51fa\u7684\u65e5\u8a8c\u4fe1\u606f\u6703\u5728\u63a7\u5236\u53f0\u4e2d\u986f\u793a\u3002\u65e5\u8a8c\u4fe1\u606f\u4e00\u822c\u5728\u958b\u767c\u8abf\u8a66\u6642\u5553\u7528\uff0c\u800c\u7576\u6b63\u5f0f\u4e0a\u7dda\u5f8c\uff0c\u4e00\u822c\u6703\u5c07\u8a72\u51fd\u6578\u53bb\u6389 2.3 \u6e90\u4ee3\u78bc\uff08Source\uff09 \u67e5\u770b\u6587\u4ef6\uff1a\u5728\u6e90\u4ee3\u78bc\uff08Source\uff09\u9801\u9762\u53ef\u4ee5\u67e5\u770b\u5230\u7576\u524d\u7db2\u9801\u7684\u6240\u6709\u6e90\u6587\u4ef6\u3002\u5728\u5de6\u5074\u6b04\u4e2d\u53ef\u4ee5\u770b\u5230\u6e90\u6587\u4ef6\u4ee5\u6a39\u7d50\u69cb\u9032\u884c\u5c55\u793a\u3002\u6dfb\u52a0\u65b7\u9ede\uff1a\u5728\u6e90\u4ee3\u78bc\u5de6\u908a\u6709\u884c\u865f\uff0c\u9ede\u64ca\u5c0d\u61c9\u884c\u7684\u884c\u865f\uff0c\u5c31\u597d\u7d66\u6539\u884c\u6dfb\u52a0\u4e0a\u4e00\u500b\u65b7\u9ede\uff08\u518d\u6b21\u9ede\u64ca\u53ef\u522a\u9664\u65b7\u9ede\uff09\u3002\u53f3\u9375\u9ede\u64ca\u65b7\u9ede\uff0c\u5728\u5f48\u51fa\u7684\u83dc\u55ae\u4e2d\u9078\u64c7Edit breakpoint\u53ef\u4ee5\u7d66\u8a72\u65b7\u7684\u6dfb\u52a0\u4e2d\u65b7\u689d\u4ef6\u3002 \u4e2d\u65b7\u8abf\u8a66\uff1a\u6dfb\u52a0\u65b7\u9ede\u5f8c\uff0c\u7576JS\u4ee3\u78bc\u904b\u884c\u5230\u65b7\u9ede\u6642\u6703\u4e2d\u65b7\uff08\u5c0d\u65bc\u6dfb\u52a0\u4e86\u4e2d\u65b7\u689d\u4ef6\u7684\u65b7\u9ede\u5728\u7b26\u5408\u689d\u4ef6\u6642\u4e2d\u65b7\uff09\uff0c\u6b64\u6642\u53ef\u4ee5\u5c07\u5149\u6a19\u653e\u5728\u8b8a\u91cf\u4e0a\u67e5\u770b\u8b8a\u91cf\u7684 \u4e5f\u53ef\u4ee5\u5728\u53f3\u908a\u7684\u5074\u6b04\u4e0a\u67e5\u770b\uff1a \u5728\u53f3\u5074\u8b8a\u91cf\u4e0a\u65b9\uff0c\u6709\u7e7c\u7e8c\u904b\u884c\u3001\u55ae\u6b65\u8df3\u904e\u7b49\u6309\u9215\uff0c\u53ef\u4ee5\u5728\u7576\u524d\u65b7\u9ede\u5f8c\uff0c\u9010\u884c\u904b\u884c\u4ee3\u78bc\uff0c\u6216\u8005\u76f4\u63a5\u8b93\u5176\u7e7c\u7e8c\u904b\u884c\u3002 2.4 \u7db2\u7d61\uff08Network\uff09 \u7db2\u7d61\u80fd\u5920\u8a18\u9304\u6240\u6709\u8acb\u6c42\uff0c\u4e26\u4e14\u9032\u884c\u56de\u653e\uff0c\u53e6\u5b58\u70ba\u6587\u4ef6\u9032\u884c\u5206\u6790\u3002 \u7d05\u8272\u5713\u578b\uff1a\u8a18\u9304\u6309\u9215 \u8655\u65bc\u6253\u958b\u72c0\u614b\u6642\u6703\u5728\u6b64\u9762\u677f\u9032\u884c\u7db2\u7d61\u9023\u63a5\u7684\u4fe1\u606f\u8a18\u9304\uff0c\u95dc\u9589\u5f8c\u5247\u4e0d\u6703\u8a18\u9304\u3002 \u5713\u88cf\u9762\u6709\u659c\u7dda\uff1a\u6e05\u9664\u6309\u9215 \u6e05\u9664\u7576\u524d\u7684\u7db2\u7d61\u9023\u63a5\u8a18\u9304\u4fe1\u606f\u3002\uff08\u9ede\u64ca\u4e00\u4e0b\u5c31\u80fd\u6e05\u7a7a\uff09 \u4e0b\u9762\u7684\u904e\u6ffe\u5668\uff08Filter\uff09 \u80fd\u5920\u81ea\u5b9a\u7fa9\u7be9\u9078\u689d\u4ef6\uff0c\u627e\u5230\u81ea\u5df1\u60f3\u8981\u8cc7\u6e90\u4fe1\u606f\uff0c\u5982\u4e0b\u5716\u6240\u793a\u3002 \u4e5f\u53ef\u4ee5\u662f\u4e00\u4e9b\u6307\u5b9a\u689d\u4ef6\u6307\u5b9a\u689d\u4ef6\u6709\u54ea\u4e9b\uff1f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[102],"tags":[],"class_list":["post-30615","post","type-post","status-publish","format-standard","hentry","category-webdesign-tools"],"_links":{"self":[{"href":"https:\/\/web4theme.com\/index.php?rest_route=\/wp\/v2\/posts\/30615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web4theme.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web4theme.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web4theme.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web4theme.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30615"}],"version-history":[{"count":2,"href":"https:\/\/web4theme.com\/index.php?rest_route=\/wp\/v2\/posts\/30615\/revisions"}],"predecessor-version":[{"id":30635,"href":"https:\/\/web4theme.com\/index.php?rest_route=\/wp\/v2\/posts\/30615\/revisions\/30635"}],"wp:attachment":[{"href":"https:\/\/web4theme.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web4theme.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=30615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web4theme.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=30615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}