cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/59349.html ADDED
@@ -0,0 +1,244 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>一文洞察Chrome DevTools近半年新增了哪些功能 | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">一文洞察Chrome DevTools近半年新增了哪些功能</h1><div class="post-meta"><span class="date">2019-10-24</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E8%B5%84%E8%AE%AF/">资讯 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 2.9k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 11</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/59349.html#vcomment"><span class="waline-comment-count" data-path="/article/59349.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://www.zoo.team/article/chrome-devtools</code></p>
20
+ <p>工欲善其事，必先利其器。Chrome Devtools 是前端开发工程师不可或缺的开发工具，最近半年 Chrome 更新了 6 个版本，其中的 5 个版本里 Chrome Devtools 也更新了一些新功能，我们对最近的一些更新做了翻译整理，下面我们一起来看看近半年有哪些值得关注的新功能。</p>
21
+ <span id="more"></span>
22
+
23
+ <p> 本文由政采云前端团队 @ 子洋同学翻译，原文可访问： <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/09/devtools">https://developers.google.com/web/updates/2019/09/devtools</a></p>
24
+ <h2 id="DevTools（Chrome-74）的新增功能"><a href="#DevTools（Chrome-74）的新增功能" class="headerlink" title="DevTools（Chrome 74）的新增功能"></a>DevTools（Chrome 74）的新增功能</h2><h3 id="高亮显示所有受-CSS-属性影响的节点"><a href="#高亮显示所有受-CSS-属性影响的节点" class="headerlink" title="高亮显示所有受 CSS 属性影响的节点"></a>高亮显示所有受 CSS 属性影响的节点</h3><p>将鼠标悬停在会影响节点盒子模型的 CSS 属性上，如 <code>padding</code> 或 <code>margin</code> ，会高亮显示受到这个属性声明影响的所有节点。</p>
25
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/1.png" alt="将鼠标悬停在margin属性上会突出显示受该声明影响的所有节点"></p>
26
+ <h3 id="Audits-面板中的-Lighthouse-v4"><a href="#Audits-面板中的-Lighthouse-v4" class="headerlink" title="Audits 面板中的 Lighthouse v4"></a>Audits 面板中的 Lighthouse v4</h3><p>新增加的 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/audits/tap-targets">Tap targets are not sized appropriately</a> 可以检查移动设备上的交互式元素（如按钮和链接）是否设置了合适的尺寸和间隔。</p>
27
+ <p>例如：点击目标的大小是否易于点击，或者是否距离其他可点击目标过近，更多： <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/audits/tap-targets">Tap targets are not sized appropriately</a></p>
28
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/2.png" alt="点击目标审核"></p>
29
+ <p> PWA 分类使用新的徽章计分系统。</p>
30
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/3.png" alt="PWA类别的新徽章计分系统"></p>
31
+ <p>Lighthouse 相关介绍可参考：<a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/#devtools"><strong>Lighthouse</strong></a></p>
32
+ <h3 id="新增-WebSocket-二进制消息查看器"><a href="#新增-WebSocket-二进制消息查看器" class="headerlink" title="新增 WebSocket 二进制消息查看器"></a>新增 WebSocket 二进制消息查看器</h3><p>查看 WebSocket 二进制消息的内容：</p>
33
+ <ol>
34
+ <li>打开 <strong>Network</strong> 面板。可参考 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/network/">Inspect Network Activity</a> 了解 Network 分析的基础使用。</li>
35
+ </ol>
36
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/4.png" alt="网络面板"></p>
37
+ <ol>
38
+ <li>点击 <strong>WS</strong>， 过滤不是 WebSocket 连接的资源。</li>
39
+ </ol>
40
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/5.png" alt="单击WS之后，仅显示WebSockety连接"></p>
41
+ <ol>
42
+ <li>点击 WebSocket 连接的 <strong>Name</strong> 查看详情 。</li>
43
+ </ol>
44
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/6.png" alt="检查WebSocket连接"></p>
45
+ <ol>
46
+ <li>点击 <strong>Messages</strong> tab。</li>
47
+ </ol>
48
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/7.png" alt="消息选项卡"></p>
49
+ <ol>
50
+ <li>点击其中的一个 <strong>Binary Message</strong> 查看详情 。</li>
51
+ </ol>
52
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/8.png" alt="检查二进制消息"></p>
53
+ <p>可以使用底部的下拉菜单将消息转换为 Base64 或 UTF-8。点击<strong>复制到剪贴板</strong><img src="https://developers.google.com/web/tools/chrome-devtools/images/shared/copy-to-clipboard.png" alt="复制到剪贴板"> 可以复制二进制消息。</p>
54
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/9.png" alt="将二进制消息查看为Base64"></p>
55
+ <h3 id="可在-Command-Menu-中使用区域屏幕截图"><a href="#可在-Command-Menu-中使用区域屏幕截图" class="headerlink" title="可在 Command Menu 中使用区域屏幕截图"></a>可在 Command Menu 中使用区域屏幕截图</h3><p>区域截图可以捕获窗口一部分的屏幕截图。这个功能之前访问入口非常隐蔽，现在可以从 <strong>Command Menu</strong> 直接使用区域截图。</p>
56
+ <ol>
57
+ <li>打开 DevTools，然后按 Control + Shift + P 或 Command + Shift + P（Mac）打开 <strong>Command Menu</strong>（命令菜单）。</li>
58
+ </ol>
59
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/10.png" alt="命令菜单"></p>
60
+ <ol>
61
+ <li><p>输入 <code>area</code>，选择 <strong>Capture area screenshots</strong>，然后 Enter。</p>
62
+ </li>
63
+ <li><p>将鼠标拖到要截屏的部分。</p>
64
+ </li>
65
+ <li><p>选择窗口的一部分截图。</p>
66
+ </li>
67
+ </ol>
68
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/11.png" alt="选择视口的一部分以进行屏幕截图"></p>
69
+ <h3 id="Network-面板中的-Service-Worker-过滤器"><a href="#Network-面板中的-Service-Worker-过滤器" class="headerlink" title="Network 面板中的 Service Worker 过滤器"></a>Network 面板中的 Service Worker 过滤器</h3><p>在 <strong>Network</strong> 筛选框中输入 <code>is:service-worker-initiated</code> 或 <code>is:service-worker-intercepted</code> 可以查看由 service worker 发起（<code>initiated</code>）或可能被其修改（<code>intercepted</code>）的请求。</p>
70
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/12.png" alt="筛选依据是：服务工作者发起的"></p>
71
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/13.png" alt="筛选依据是：服务工人拦截"></p>
72
+ <p>Network 日志过滤的更多资料，可参考 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/network/#filter">Filter resources</a>。</p>
73
+ <h3 id="Performance-recordings-里增加长任务标记"><a href="#Performance-recordings-里增加长任务标记" class="headerlink" title="Performance recordings 里增加长任务标记"></a>Performance recordings 里增加长任务标记</h3><p>long tasks 相关介绍可参考 <a target="_blank" rel="noopener" href="https://w3c.github.io/longtasks/#sec-terminology">long tasks</a>。</p>
74
+ <p><strong>Performance</strong> 面板分析页面加载性能的示例，可参考 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/speed/get-started#main">Do less main thread work</a></p>
75
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/14.png" alt="将鼠标悬停在Performance录音中的长期任务上"></p>
76
+ <h3 id="Performance-Timings-部分增加-First-Paint-的标记"><a href="#Performance-Timings-部分增加-First-Paint-的标记" class="headerlink" title="Performance Timings 部分增加 First Paint 的标记"></a>Performance <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2018/11/devtools#metrics">Timings</a> 部分增加 First Paint 的标记</h3><p>现在，Performance recordings 中的 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2018/11/devtools#metrics">Timings</a> 会标记出 First Paint 的节点。</p>
77
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/15.png" alt="时间部分中的第一道油漆"></p>
78
+ <h2 id="DevTools（Chrome-75）的新增功能"><a href="#DevTools（Chrome-75）的新增功能" class="headerlink" title="DevTools（Chrome 75）的新增功能"></a>DevTools（Chrome 75）的新增功能</h2><h3 id="CSS-函数自动补全有意义的预设值"><a href="#CSS-函数自动补全有意义的预设值" class="headerlink" title="CSS 函数自动补全有意义的预设值"></a>CSS 函数自动补全有意义的预设值</h3><p>某些 CSS 属性（如<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter"><code>filter</code></a>）的值是函数。例如，<code>filter: blur(1px)</code> 给节点增加 1px 模糊。当自动补全，如 <code>filter</code> 的属性时，DevTools 会自动补全有意义的值，可以很方便的预览这个值将在节点上进行的更改效果。</p>
79
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/16.png" alt="旧的自动完成行为。">老的版本自动补全，DevTools 自动补全属性为 <code>filter: blur</code> ，在视口中看不到任何更改。</p>
80
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/17.png" alt="新的自动完成行为。">新的自动补全，DevTools 自动补全属性为 <code>filter: blur(1px)</code>，可以在窗口中看见改变效果。</p>
81
+ <h3 id="从-Command-Menu-清除网页数据"><a href="#从-Command-Menu-清除网页数据" class="headerlink" title="从 Command Menu 清除网页数据"></a>从 Command Menu 清除网页数据</h3><p>按下 Control+ Shift+ P或 Command+ Shift+ P（Mac）打开 <strong>Command Menu</strong>，然后运行 <strong>Clear Site Data</strong> 命令清除页面相关的所有数据，包括 <a target="_blank" rel="noopener" href="https://developers.google.com/web/ilt/pwa/introduction-to-service-worker">Service workers</a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"><code>localStorage</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage"><code>sessionStorage</code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a target="_blank" rel="noopener" href="https://www.w3.org/TR/webdatabase/">Web SQL</a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">Cookies</a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">Cache</a> 以及 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache">Application Cache</a>.</p>
82
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/18.png" alt="清除站点数据命令。"></p>
83
+ <p><strong>Application</strong> &gt; <strong>Clear Storage</strong> 中已经存在这个功能。Chrome 75 中新增可以从 <strong>Command Menu</strong> 执行这个命令。</p>
84
+ <p>如果不想删除所有数据，可以从 <strong>Application</strong> &gt; <strong>Clear Storage</strong> 选择删除哪些数据 。</p>
85
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/19.png" alt="应用程序&gt;清除存储。"></p>
86
+ <h3 id="查看所有-IndexedDB-数据库"><a href="#查看所有-IndexedDB-数据库" class="headerlink" title="查看所有 IndexedDB 数据库"></a>查看所有 IndexedDB 数据库</h3><p>以前 <strong>Application</strong> &gt; <strong>IndexedDB</strong> 只允许查看当前域的 IndexedDB 数据库。如果页面里有<code>&lt;iframe&gt;</code>，并且这个<code>&lt;iframe&gt;</code> 也使用 IndexedDB，就无法查看对应的数据库。从 Chrome 75 开始，DevTools 会显示所有域的 IndexedDB 数据库。</p>
87
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/20.png" alt="旧的行为。 该页面正在嵌入一个使用IndexedDB的演示，但是看不到任何数据库。">旧版本中，这个页面了嵌入一个使用 IndexedDB 的 demo，但是看不到任何数据库信息。</p>
88
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/21.png" alt="新的行为。 该演示的数据库是可见的。"> 新版本中，可以查看这个 demo 的数据库。</p>
89
+ <h3 id="悬停查看资源未压缩的大小"><a href="#悬停查看资源未压缩的大小" class="headerlink" title="悬停查看资源未压缩的大小"></a>悬停查看资源未压缩的大小</h3><p>将鼠标悬停在 <strong>Size</strong> 列上可以查看资源未压缩的大小。</p>
90
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/22.png" alt="将鼠标悬停在&quot;大小&quot;列上可以查看资源的未压缩大小。"></p>
91
+ <h3 id="内联断点"><a href="#内联断点" class="headerlink" title="内联断点"></a>内联断点</h3><p>假设给下面的代码添加 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#loc">代码行断点</a>：</p>
92
+ <pre><code>- document.querySelector(&#39;#dante&#39;).addEventListener(&#39;click&#39;, logWarning);
93
+ </code></pre>
94
+ <p>在此行的开头，<code>document.querySelector(&#39;#dante&#39;)</code>调用之前或 <code>addEventListener(&#39;click&#39;, logWarning)</code> 调用之前添加断点 。如果全部启用，则实际上创建了 3 个断点。之前，<strong>Breakpoints</strong> 面板无法单独管理这 3 个断点。从 Chrome 75 开始，每个内联断点在 <strong>Breakpoints</strong> 面板中都有自己单独的一行。</p>
95
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/23.png" alt="旧的行为。 &quot;断点&quot;窗格中只有一个条目。"> 旧版本中，<strong>Breakpoints</strong> 面板中只有 1 行。</p>
96
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/24.png" alt="新的行为。 &quot;断点&quot;窗格中有3个条目。">新版本中，<strong>Breakpoints</strong>面板中有 3 行。</p>
97
+ <h2 id="DevTools（Chrome-76）的新增功能"><a href="#DevTools（Chrome-76）的新增功能" class="headerlink" title="DevTools（Chrome 76）的新增功能"></a>DevTools（Chrome 76）的新增功能</h2><h3 id="根据-CSS-值自动补全属性名"><a href="#根据-CSS-值自动补全属性名" class="headerlink" title="根据 CSS 值自动补全属性名"></a>根据 CSS 值自动补全属性名</h3><p>输入 CSS 值，根据值找到对应的属性名称。</p>
98
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/25.png" alt="键入&quot; bold&quot;后，&quot;样式&quot;窗格将自动完成为&quot; font-weight：bold&quot;。">输入<code>bold</code> 后，自动补全 <code>font-weight: bold</code>。</p>
99
+ <h3 id="总内存实时使用量"><a href="#总内存实时使用量" class="headerlink" title="总内存实时使用量"></a>总内存实时使用量</h3><p><strong>Memory</strong> 面板实时显示总内存的使用情况。</p>
100
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/26.png" alt="实时总内存使用率。"><strong>Memory</strong> 面板的底部显示这个页面总共使用 <strong>43.4 MB</strong> 内存。<strong>209 KB &#x2F; s</strong> 表示总内存使用量每秒增加 209 KB。</p>
101
+ <p>更多实时跟踪内存介绍，可参考 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor">Performance Monitor</a></p>
102
+ <h3 id="展示-Service-Workers-端口号"><a href="#展示-Service-Workers-端口号" class="headerlink" title="展示 Service Workers 端口号"></a>展示 Service Workers 端口号</h3><p><strong>Service Workers</strong> 面板的标题中包含端口号，可以更轻松的追踪正在调试的 Service Worker 。</p>
103
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/27.png" alt="服务人员端口。"></p>
104
+ <h3 id="查看-Background-Fetch-和-Background-Sync-事件"><a href="#查看-Background-Fetch-和-Background-Sync-事件" class="headerlink" title="查看 Background Fetch 和 Background Sync 事件"></a>查看 Background Fetch 和 Background Sync 事件</h3><p>可以在 <strong>Application</strong> 面板里，新的 <strong>Background Services</strong> 可以监视 <a target="_blank" rel="noopener" href="https://medium.com/google-developer-experts/background-fetch-api-get-ready-to-use-it-69cca522cd8f">Background Fetch</a> 和 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync</a> 事件。由于 Background Fetch 和 Background Sync 事件是在 Background 中发生的，如果只在打开 DevTools 时记录事件，用处不大。因此，一旦开始记录，即便关闭页面，甚至关闭 Chrome，Background Fetch 和 Background Sync 事件也会继续记录（最多三天）。</p>
105
+ <p>在 <strong>Application</strong> 面板，点击 <strong>Background Fetch</strong> 或 <strong>Background Sync</strong> 选项，然后点击 <strong>Record</strong> 开始记录。点击事件查看更多信息。</p>
106
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/28.png" alt="后台获取窗格。"></p>
107
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/29.png" alt="后台同步窗格。"></p>
108
+ <p>Background Fetch 介绍可参考： <a target="_blank" rel="noopener" href="https://medium.com/google-developer-experts/background-fetch-api-get-ready-to-use-it-69cca522cd8f">Background Fetch</a></p>
109
+ <p>Background Sync 介绍可参考：<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2015/12/background-sync">Background Sync </a></p>
110
+ <h2 id="DevTools（Chrome-77）的新增功能"><a href="#DevTools（Chrome-77）的新增功能" class="headerlink" title="DevTools（Chrome 77）的新增功能"></a>DevTools（Chrome 77）的新增功能</h2><h3 id="复制元素样式"><a href="#复制元素样式" class="headerlink" title="复制元素样式"></a>复制元素样式</h3><p>右键点击 <strong>DOM树</strong>中的节点，将该节点的 CSS 复制到剪贴板。</p>
111
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/30.png" alt="复制样式。"></p>
112
+ <h3 id="布局变化可视化"><a href="#布局变化可视化" class="headerlink" title="布局变化可视化"></a>布局变化可视化</h3><p><strong>注意：使用这个功能可能会导致屏幕闪烁。</strong></p>
113
+ <p>如果页面没有为图片和广告预留空间，当图片和广告加载完成，浏览器必须将其他内容下移而留出空间，这时内容可能会跳来跳去，这个问题就是<strong>布局移动</strong>。解决方案是使用 <a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#layout_shifting_and_placeholders">placeholders</a>。</p>
114
+ <p>DevTools 现在可以检测布局偏移：</p>
115
+ <ol>
116
+ <li>打开 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/command-menu">Command Menu</a>。</li>
117
+ <li>输入 <code>Rendering</code>。</li>
118
+ <li>运行 <strong>Show Rendering</strong> 。</li>
119
+ <li>选中 <strong>Layout Shift Regions</strong> 复选框。这时与页面进行交互，布局变化会突出显示为蓝色。</li>
120
+ </ol>
121
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/31.png" alt="布局转移。"></p>
122
+ <h3 id="Audits-面板下的-Lighthouse-5-1"><a href="#Audits-面板下的-Lighthouse-5-1" class="headerlink" title="Audits 面板下的 Lighthouse 5.1"></a>Audits 面板下的 Lighthouse 5.1</h3><p><strong>Audits</strong> 面板现在使用 <a target="_blank" rel="noopener" href="https://github.com/GoogleChrome/lighthouse/releases/tag/v5.1.0">Lighthouse 5.1</a> 版本。新的检查项包括：</p>
123
+ <ul>
124
+ <li><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/#safari">是否有可用的 <code>apple-touch-icon</code></a>。检查是否可以将 PWA 添加到 iOS 主屏幕。</li>
125
+ <li><a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/audits/budgets">请求数量、文件大小</a>。报告各种类别的网络请求总数和文件大小，例如 documents, scripts, stylesheets, images 等。</li>
126
+ <li><a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2018/05/first-input-delay">首次输入延迟</a>。衡量用户首次与网站进行交互（即当点击链接，按钮或使用 JavaScript 控件）到浏览器实际能够访问之间的时间。请注意，此度量标准替代了 <strong>预估输入延迟</strong>（Estimated Input Latency）度量标准。此项不影响 Performance 类别得分。</li>
127
+ </ul>
128
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/32.png" alt="新的&quot;审核&quot;面板用户界面。"></p>
129
+ <p>Lighthouse 5.1 的 Node 和 CLI 版本更新可参考：</p>
130
+ <ul>
131
+ <li><a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/audits/budgets">Performance Budgets</a>. - <a target="_blank" rel="noopener" href="https://github.com/GoogleChrome/lighthouse/blob/master/docs/plugins.md">Plugins</a>. - <a target="_blank" rel="noopener" href="https://github.com/GoogleChrome/lighthouse-stack-packs">Stack Packs</a>.</li>
132
+ </ul>
133
+ <h3 id="系统主题同步"><a href="#系统主题同步" class="headerlink" title="系统主题同步"></a>系统主题同步</h3><p>如果使用操作系统的深色主题，DevTools 会自动切换到 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/customize/dark-theme">深色主题</a>。</p>
134
+ <h3 id="Breakpoint-Editor-的快捷键"><a href="#Breakpoint-Editor-的快捷键" class="headerlink" title="Breakpoint Editor 的快捷键"></a>Breakpoint Editor 的快捷键</h3><p>焦点在 Sources 面板中的编辑器时，按下 Control + Alt + B 或 Command + Option + B（Mac）打开 <strong>断点编辑器</strong>。断点编辑器可以用来创建<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/01/devtools#logpoints">日志断点</a>和<a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#conditional-loc">条件断点</a>。</p>
135
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/33.png" alt="断点编辑器。"></p>
136
+ <h3 id="Network-面板中展示-Prefetch-cache"><a href="#Network-面板中展示-Prefetch-cache" class="headerlink" title="Network 面板中展示 Prefetch cache"></a>Network 面板中展示 Prefetch cache</h3><p>当资源从 prefetch cache 中加载，在 Network 面板的 <strong>Size</strong> 列会显示 prefetch cache 。<a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/performance/resource-prioritization#prefetch">prefetch cache</a> 是一种新的 Web 功能，可加快页面的加载速度。 <a target="_blank" rel="noopener" href="https://caniuse.com/#feat=link-rel-prefetch">Can I use…</a> 显示，截至 2019年7月，全球 83.33％ 的浏览器都支持这个特性。</p>
137
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/34.png" alt="&quot;大小&quot;列显示资源来自预取缓存。"><strong>Size</strong> 列显示<code>prefetch2.html</code>和 <code>prefetch2.css</code>来自<code>(prefetch cache)</code>。</p>
138
+ <p>更多可参考：<a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/performance/resource-prioritization#prefetch">prefetch cache</a></p>
139
+ <p>示例： <a target="_blank" rel="noopener" href="https://devtools.glitch.me/wndt77/prefetch1.html">prefetch cache demo</a></p>
140
+ <h3 id="查看对象的私有属性"><a href="#查看对象的私有属性" class="headerlink" title="查看对象的私有属性"></a>查看对象的私有属性</h3><p>控制台现在支持显示<a target="_blank" rel="noopener" href="https://v8.dev/features/class-fields#private-class-fields">私有类字段</a>。</p>
141
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/35.png" alt="检查对象时，控制台现在会显示诸如&quot; #color&quot;之类的私有字段。"><code>#color</code> 在左侧的旧版 Chrome 中不会显示，而右侧的新版本中会显示。</p>
142
+ <h3 id="Application-面板-Notifications-and-push-messages"><a href="#Application-面板-Notifications-and-push-messages" class="headerlink" title="Application 面板 Notifications and push messages"></a>Application 面板 Notifications and push messages</h3><p>现在，Application 面板的 Background Services 支持查看 Push Messages 和 Notifications。当服务器向 service worker 发送信息时，将出现在 Push Messages。当 service worker 或页面脚本向用户显示信息时，会出现在 Notifications。</p>
143
+ <p>与 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/05/devtools#background">Chrome 76 </a>的 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/05/devtools#background">Background Fetch and Background Sync 功能一样</a>，一旦开始记录，即使关闭页面，甚至关闭 Chrome，页面上的推送消息和通知录也会持续记录 3 天。</p>
144
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/36.png" alt="新的&quot;通知和推送消息&quot;窗格。"></p>
145
+ <p>Push Messages 相关可参考：<a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/push-notifications">Web Push Notifications</a></p>
146
+ <p>Notifications 相关可参考：<a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/push-notifications/display-a-notification">Displaying a Notification</a></p>
147
+ <h2 id="DevTools（Chrome-78）的新增功能"><a href="#DevTools（Chrome-78）的新增功能" class="headerlink" title="DevTools（Chrome 78）的新增功能"></a>DevTools（Chrome 78）的新增功能</h2><h3 id="Audits-面板支持多客户端"><a href="#Audits-面板支持多客户端" class="headerlink" title="Audits 面板支持多客户端"></a>Audits 面板支持多客户端</h3><p> Audits 面板现在可以跟其他 DevTools 功能，如 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests">Request Blocking</a> 和 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2018/01/devtools#overrides">Local Overrides </a>结合使用 。</p>
148
+ <p>假设 <strong>Audits</strong> 面板报告此页面的性能得分为70，而最大的性能影响因素之一就是 <a target="_blank" rel="noopener" href="https://web.dev/render-blocking-resources">eliminating render-blocking resources</a>。</p>
149
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/37.png" alt="初始性能得分是70。">初始<strong>性能</strong>得分。</p>
150
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/38.png" alt="初步报告指出，存在3个渲染阻止脚本。">初始报告显示存在 3 个阻碍渲染的脚本。</p>
151
+ <p>现在可以结合 request blocking，首先可以通过 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests">禁用阻碍渲染的脚本</a>，来快速判断阻碍渲染的脚本对加载性能的影响 </p>
152
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/39.png" alt="使用&quot;请求阻止&quot;选项卡阻止有问题的脚本。">使用 <strong>Request Blocking</strong> 选项卡禁用有问题的脚本。</p>
153
+ <p>然后再次审核页面：</p>
154
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/40.png" alt="启用请求阻止后，性能得分提高到97。">阻止有问题的脚本后，<strong>性能</strong>得分提高到了 97。 </p>
155
+ <h3 id="Payment-Handler-调试"><a href="#Payment-Handler-调试" class="headerlink" title="Payment Handler 调试"></a>Payment Handler 调试</h3><p>现在，<strong>Application</strong> 面板的 <strong>Background Services</strong> 部分，支持 <a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2018/06/payment-handler-api">Payment Handler（付款）</a> 事件。</p>
156
+ <ol>
157
+ <li><p>转到 <strong>Application</strong>面板。</p>
158
+ </li>
159
+ <li><p>打开 <strong>Payment Handler</strong> 窗口。</p>
160
+ </li>
161
+ <li><p>点击 <strong>记录</strong>。即使关闭了DevTools，DevTools 也会记录 3 天的 Payment Handler 事件。</p>
162
+ </li>
163
+ </ol>
164
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/41.png" alt="记录付款处理程序事件。"></p>
165
+ <ol>
166
+ <li><p>如果 Payment Handler 事件发生在其他域，可以启用 <strong>Show events from other domains</strong> 选项。</p>
167
+ </li>
168
+ <li><p>触发付款处理事件后，点击事件行以了解有关该事件的更多信息。</p>
169
+ </li>
170
+ </ol>
171
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/42.png" alt="查看付款处理程序事件。"></p>
172
+ <p>Payment Handler 相关介绍可参考：<a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2018/06/payment-handler-api">Payment Handler</a></p>
173
+ <h3 id="Audits-面板下的-Lighthouse-5-2"><a href="#Audits-面板下的-Lighthouse-5-2" class="headerlink" title="Audits 面板下的 Lighthouse 5.2"></a>Audits 面板下的 Lighthouse 5.2</h3><p><strong>Audits</strong> 面板，使用 <a target="_blank" rel="noopener" href="https://github.com/GoogleChrome/lighthouse/releases/tag/v5.2.0">Lighthouse 5.2</a> 版本。新增 <strong>Third-Party Usage</strong> 审核项可以判断页面请求了多少第三方代码，以及页面加载时第三方代码阻塞了主线程多长时间。</p>
174
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/43.png" alt="Lighthouse报告用户界面中&quot;第三方使用情况&quot;审核的屏幕截图。"></p>
175
+ <p>可参考 <a target="_blank" rel="noopener" href="https://web.dev/fast#optimize-your-third-party-resources">Optimize your third-party resources</a> 了解有关第三方代码如何降低加载性能的更多信息。</p>
176
+ <h3 id="Performance-panel-中查看最大绘制内容"><a href="#Performance-panel-中查看最大绘制内容" class="headerlink" title="Performance panel 中查看最大绘制内容"></a>Performance panel 中查看最大绘制内容</h3><p><a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#record-load"><strong>Performance</strong> 面板中分析加载性能</a>时，<strong>Timing</strong> 现在新增了一个<a target="_blank" rel="noopener" href="https://web.dev/largest-contentful-paint">最大绘制内容</a>（largetst contentful paint, LCP）的标志。LCP 记录了视图中可见的内容最大的元素的渲染时间。</p>
177
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/44.png" alt="&quot;时序&quot;部分中的LCP标记。"></p>
178
+ <p>高亮显示与 <strong>LCP</strong> 关联的 <strong>DOM</strong> 节点：</p>
179
+ <ol>
180
+ <li><p>点击 <strong>Timings</strong> 部分中的 <strong>LCP</strong> 标记。</p>
181
+ </li>
182
+ <li><p>将鼠标悬停在 <strong>Summary</strong> 选项卡中的 <strong>Related Node</strong> 上高亮显示视图中的节点。</p>
183
+ </li>
184
+ </ol>
185
+ <p><img src="https://zcy-video.oss-cn-shanghai.aliyuncs.com/medical/zooTeam/10.16/45.png" alt="&quot;摘要&quot;选项卡的&quot;相关节点&quot;部分。"></p>
186
+ <ol>
187
+ <li>点击<strong>相关节点</strong>可在 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/dom"><strong>DOM 树</strong></a>中将其选中。</li>
188
+ </ol>
189
+ <h2 id="更多参考"><a href="#更多参考" class="headerlink" title="更多参考"></a>更多参考</h2><p><strong>Chrome DevTools 最近的更新到此就介绍完了，更多的介绍可以参考</strong></p>
190
+ <p><a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/03/devtools">What’s New In DevTools (Chrome 74)</a></p>
191
+ <p><a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/04/devtools">What’s New In DevTools (Chrome 75)</a></p>
192
+ <p><a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/05/devtools">What’s New In DevTools (Chrome 76)</a></p>
193
+ <p><a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/07/devtools">What’s New In DevTools (Chrome 77)</a></p>
194
+ <p><a target="_blank" rel="noopener" href="https://developers.google.com/web/updates/2019/09/devtools">What’s New In DevTools (Chrome 78)</a></p>
195
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/59349.html">https://xuehuayu.cn/article/59349.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/45156.html">重磅！TypeScript 3.7 RC发布</a><a class="next" href="/article/26624.html">Node.js 13.0 正式发布</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
196
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
197
+ const locale = {
198
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
199
+ sofa: '沙发空缺中，还不快抢~',
200
+ };
201
+ Waline.init({
202
+ el: '#vcomment',
203
+ serverURL: serverURL,
204
+ pageSize: '20',
205
+ visitor: true, // 阅读量统计
206
+ requiredMeta: ['nick', 'mail'],
207
+ emoji: [
208
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
209
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
210
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
211
+ ],
212
+ locale,
213
+ pageview: true
214
+ })
215
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
216
+ var val = $(this).val()
217
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
218
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
219
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
220
+
221
+ if (val === 'self') {
222
+ $('#search').html(self)
223
+ var search_path = 'search.xml';
224
+ if (search_path.length == 0) {
225
+ search_path = 'search.xml';
226
+ }
227
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
228
+ searchFunc(path, 'local-search-input', 'local-search-result');
229
+ } else if (val === 'baidu') {
230
+ $('#search').html(baidu)
231
+ } else if (val === 'google') {
232
+ $('#search').html(google)
233
+ }
234
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
235
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
236
+ if (cnb) {
237
+ var gxba =document.getElementById('gxba')
238
+ var gaba =document.getElementById('gaba')
239
+ var gabaLink =document.getElementById('gaba-link')
240
+ gxba.innerText ='京ICP备20007647号-1'
241
+ gaba.innerText ='京公网安备 11010802031254号'
242
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
243
+ }
244
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>