-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1265 lines (889 loc) · 72.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh">
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="utf-8">
<title>Hexo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
<link rel="icon" href="/images/favicon.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css">
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/outdatedbrowser/outdatedbrowser.min.css">
<link rel="stylesheet" href="/css/back-to-top.css">
<link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="is-3-column">
<nav class="navbar navbar-main">
<div class="container">
<div class="navbar-brand is-flex-center">
<a class="navbar-item navbar-logo" href="/">
<img src="/images/logo.svg" alt="Hexo" height="28">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item is-active" href="/">Home</a>
<a class="navbar-item" href="/archives">Archives</a>
<a class="navbar-item" href="/categories">Categories</a>
<a class="navbar-item" href="/tags">Tags</a>
<a class="navbar-item" href="/about">About</a>
</div>
<div class="navbar-end">
<a class="navbar-item" target="_blank" title="Download on GitHub" href="http://github.com/ppoffice/hexo-theme-icarus">
<i class="fab fa-github"></i>
</a>
<a class="navbar-item search" title="搜索" href="javascript:;">
<i class="fas fa-search"></i>
</a>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main">
<div class="card">
<div class="card-image">
<a href="/2019/01/31/Node-全局包管理笔记/" class="image is-7by1">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/10.jpg!/both/1500x750" alt="Node 全局包管理笔记">
</a>
</div>
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2019-01-31T06:37:10.000Z">2019-01-31</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/npm/">npm</a>
</div>
<span class="level-item has-text-grey">
3 分钟 读完 (大约 495 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2019/01/31/Node-全局包管理笔记/">Node 全局包管理笔记</a>
</h1>
<div class="content">
<ul>
<li>npm：node 自带的包管理工具</li>
<li>yarn：由 facebook 开源的 node 包管理工具</li>
</ul>
<h2 id="全局包"><a href="#全局包" class="headerlink" title="全局包"></a>全局包</h2><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><h4 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h4><figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install package-name -g</span><br></pre></td></tr></table></figure>
<p>nvm 下载的不同版本的 node 是相互独立</p>
<figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">~/.nvm/versions/node » ls</span><br><span class="line">v10.4.1</span><br><span class="line">v4.6.1</span><br><span class="line">v8.11.4</span><br></pre></td></tr></table></figure>
<p>上面的命令显示在电脑中下载的3个不同的 node 版本，<strong>里面存放着当前版本中下载的全局包以及 cli 命令</strong></p>
<h4 id="yarn"><a href="#yarn" class="headerlink" title="yarn"></a>yarn</h4><figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ yarn global add package-name</span><br></pre></td></tr></table></figure>
<ul>
<li>不像 npm 里的 –global 标志，global 是一个必须跟在 yarn 后面的命令。 输入 <code>yarn add global package-name</code> 会把名为 global 和 package-name 的包添加到本地，而非全局添加 package-name。</li>
</ul>
<h3 id="查看"><a href="#查看" class="headerlink" title="查看"></a>查看</h3><figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment"># npm</span></span><br><span class="line">$ npm list -g --depth 0</span><br><span class="line"><span class="hljs-comment"># yarn</span></span><br><span class="line">$ yarn global list</span><br></pre></td></tr></table></figure>
<h3 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h3><figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment"># npm</span></span><br><span class="line">$ npm uninstall package-name -g</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">## 如果使用其他比如 tnpm 下载的包，也要换成特定的脚本</span></span><br><span class="line"><span class="hljs-comment">## 比如：tnpm uninstall package-name -g</span></span><br><span class="line"></span><br><span class="line"><span class="hljs-comment"># yarn</span></span><br><span class="line">$ yarn global remove package-name</span><br><span class="line">$ yarn global remove @vue/[email protected]</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">## 不需要加版本号</span></span><br><span class="line">❎ yarn global remove @vue/[email protected]</span><br><span class="line">✅ yarn global remove @vue/cli</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">## 也会移除全局对应</span></span><br></pre></td></tr></table></figure>
<h3 id="文件目录"><a href="#文件目录" class="headerlink" title="文件目录"></a>文件目录</h3><h4 id="查看脚本目录"><a href="#查看脚本目录" class="headerlink" title="查看脚本目录"></a>查看脚本目录</h4><figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$ <span class="hljs-built_in">which</span> $(cli-name)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">## 栗子</span></span><br><span class="line">$ <span class="hljs-built_in">which</span> dva</span><br><span class="line"></span><br><span class="line">/Users/dyun/.nvm/versions/node/v10.4.1/bin/dva</span><br></pre></td></tr></table></figure>
<h4 id="npm-1"><a href="#npm-1" class="headerlink" title="npm"></a>npm</h4><p>如果使用了<code>nvm</code>,比如 node 版本现在用的是10.4.1</p>
<ul>
<li>cli 目录 ~/.nvm/versions/node/v10.4.1/bin/</li>
<li>全局包 ~/.nvm/versions/node/v10.4.1/lib/node_modules/</li>
</ul>
<h4 id="yarn-1"><a href="#yarn-1" class="headerlink" title="yarn"></a>yarn</h4><ul>
<li><code>yarn global dir</code>: 将打印包含全局node_modules的全局安装文件夹的输出。默认情况下为：〜/.config/yarn/global</li>
<li><code>yarn bin</code>: 显示 yarn bin 目录的位置。默认情况下为：~/.config/yarn/global/node_modules/.bin</li>
</ul>
<h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><ul>
<li>npm 下载的包是区分 node 版本的（nvm），yarn 下载的全局包是不区分的（在任何 node 版本下都可以使用）</li>
<li>npm 下载只会提供当前包的 cli 命令。而通过 yarn 下载的则会提供包括依赖包的 cli</li>
</ul>
<h2 id="nvm-切换版本解析"><a href="#nvm-切换版本解析" class="headerlink" title="nvm 切换版本解析"></a>nvm 切换版本解析</h2><h3 id="切换命令"><a href="#切换命令" class="headerlink" title="切换命令"></a>切换命令</h3><figure class="highlight zsh hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment"># 这个命令只是简单的切换了 PATH 的脚本目录</span></span><br><span class="line"></span><br><span class="line">nvm use $(version)</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment"># PATH=/Users/dyun/.nvm/versions/node/$(version)/bin</span></span><br></pre></td></tr></table></figure>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<a href="/2019/01/29/debug-小记/" class="image is-7by1">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/6.jpg!/both/1500x750" alt="debug 小记">
</a>
</div>
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2019-01-29T07:27:59.000Z">2019-01-29</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/node/">node</a>
</div>
<span class="level-item has-text-grey">
2 分钟 读完 (大约 273 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2019/01/29/debug-小记/">debug 小记</a>
</h1>
<div class="content">
<blockquote>
<p>记录在 debug 道路上</p>
</blockquote>
<h2 id="execArgv-与-argv"><a href="#execArgv-与-argv" class="headerlink" title="execArgv 与 argv"></a>execArgv 与 argv</h2><p>execArgv 是执行参数，作用是给 node 去读的，比如</p>
<figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">node --inspect index.js server</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment"># --inspect 是给 node 使用的</span></span><br><span class="line"><span class="hljs-comment"># server 则是在应用里面解析</span></span><br></pre></td></tr></table></figure>
<h2 id="抓不到进程"><a href="#抓不到进程" class="headerlink" title="抓不到进程"></a>抓不到进程</h2><p>设置了 <code>process.title</code>，vscode debug 机制似乎可以捕捉到只有两种 title:</p>
<ul>
<li>code helper</li>
<li>node</li>
</ul>
<p>如果设置了 title，可以就抓不到了。比如</p>
<figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">process.title = <span class="hljs-string">'hexo'</span></span><br></pre></td></tr></table></figure>
<h2 id="多线程调试"><a href="#多线程调试" class="headerlink" title="多线程调试"></a>多线程调试</h2><p>虽然自带了有 autoAttachChildProcesses 这个属性，但是只对 <code>cluster</code> 有很好的支持</p>
<figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> { fork } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'child_process'</span>);</span><br><span class="line"></span><br><span class="line">fork(<span class="hljs-string">'compute.js'</span>);</span><br></pre></td></tr></table></figure>
<p>这样会因为<strong>子进程启动了重复的 debug 端口而报错</strong></p>
<figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Debugger listening on ws://127.0.0.1:3228/8ae7c5c1-440f-4f1e-ac41-da1f37588e36</span><br><span class="line">For help, see: https://nodejs.org/en/docs/inspector</span><br><span class="line">Debugger attached.</span><br><span class="line">Starting inspector on 127.0.0.1:3228 failed: address already in use</span><br><span class="line">Assertion failed: (!uv__is_closing(handle)), function uv_close, file ../deps/uv/src/unix/core.c, line 117.</span><br><span class="line">Debugger attached.</span><br></pre></td></tr></table></figure>
<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>给子进程设置单独的 debug 端口</p>
<figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">fork(<span class="hljs-string">'compute.js'</span>, [], { <span class="hljs-attr">execArgv</span>: [<span class="hljs-string">'--inspect-brk=9111'</span>] });</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 如果是第三方库，需要去改一下源码，这个有点蛋疼</span></span><br></pre></td></tr></table></figure>
<p>再通过端口附加去抓到就可以了。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<a href="/2019/01/21/node-本地-debug-调试/" class="image is-7by1">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/3.jpg!/both/1500x750" alt="node 本地 debug 调试">
</a>
</div>
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2019-01-21T09:06:04.000Z">2019-01-21</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/node/">node</a>
</div>
<span class="level-item has-text-grey">
6 分钟 读完 (大约 925 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2019/01/21/node-本地-debug-调试/">node 本地 debug 调试</a>
</h1>
<div class="content">
<p>开发者一般在开发初期的时候（包括现在的我），不管是在 node，还是浏览器 js 中都习惯使用 <code>console.log</code> 来进行代码的调试。这样做的好处是灰常的简单，特别是在浏览器 js 开发中，因为可以树状展开的原因，包括很多资深的前端工程师，都很喜欢使用。</p>
<p>但是很多优秀的开发者手中，只需要 <code>debug</code> 一次，就能很高效的发现问题。效率比 <code>console</code> 高出许多</p>
<h2 id="开始使用"><a href="#开始使用" class="headerlink" title="开始使用"></a>开始使用</h2><figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ node --inspect index.js</span><br></pre></td></tr></table></figure>
<p>只需要加上一个 <code>--inspect</code> 的参数（Node版本要大于7），就可以启动了。成功后会打印出来：</p>
<figure class="highlight plain hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Debugger listening on ws://127.0.0.1:9229/787188b1-6d48-4756-9cef</span><br><span class="line">-0a7aa8d25b76For help, see: https://nodejs.org/en/docs/inspector</span><br></pre></td></tr></table></figure>
<p>上面的命令会打开一个 WebSockets 的服务，指定了9229作为默认的端口配置查看：</p>
<figure class="highlight json hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// http://localhost:9229/json/list</span><br><span class="line"></span><br><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> <span class="hljs-attr">"description"</span>: <span class="hljs-string">"node.js instance"</span>,</span><br><span class="line"> <span class="hljs-attr">"devtoolsFrontendUrl"</span>: <span class="hljs-string">"chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:9229/787188b1-6d48-4756-9cef-0a7aa8d25b76"</span>,</span><br><span class="line"> <span class="hljs-attr">"faviconUrl"</span>: <span class="hljs-string">"https://nodejs.org/static/favicon.ico"</span>,</span><br><span class="line"> <span class="hljs-attr">"id"</span>: <span class="hljs-string">"787188b1-6d48-4756-9cef-0a7aa8d25b76"</span>,</span><br><span class="line"> <span class="hljs-attr">"title"</span>: <span class="hljs-string">"index"</span>,</span><br><span class="line"> <span class="hljs-attr">"type"</span>: <span class="hljs-string">"node"</span>,</span><br><span class="line"> <span class="hljs-attr">"url"</span>: <span class="hljs-string">"file://"</span>,</span><br><span class="line"> <span class="hljs-attr">"webSocketDebuggerUrl"</span>: <span class="hljs-string">"ws://localhost:9229/787188b1-6d48-4756-9cef-0a7aa8d25b76"</span></span><br><span class="line"> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h2 id="调试工具"><a href="#调试工具" class="headerlink" title="调试工具"></a>调试工具</h2><p>这里列出现在比较常用的几种：</p>
<ul>
<li>Chrome DevTools</li>
<li>Visual Studio Code</li>
</ul>
<h3 id="Chrome-DevTools"><a href="#Chrome-DevTools" class="headerlink" title="Chrome DevTools"></a>Chrome DevTools</h3><p>进入<a href="chrome://inspect/#devices" target="_blank" rel="noopener">chrome://inspect/#devices</a>，打开控制台会出现 <code>Server running at http://127.0.0.1:8888/</code>,表示已经开启成功了，也可以在控制台上输入 process，会看到 process 对象被打印出来了。</p>
<p>进入 source 面板。点击 <code>add folder to workspace</code> 添加你的项目到工作区，就可以进行源码调试了。</p>
<p>虽然 chrome 对 node 调试的支持十分友好，但是因为没办法在编辑器中打断点。这种方式还是不太常用</p>
<h3 id="Visual-Studio-Code"><a href="#Visual-Studio-Code" class="headerlink" title="Visual Studio Code"></a>Visual Studio Code</h3><p>通过配置项目 .vscode/launch.json 来实现。</p>
<figure class="highlight json hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="hljs-attr">"version"</span>: <span class="hljs-string">"0.2.0"</span>,</span><br><span class="line"> <span class="hljs-attr">"configurations"</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="hljs-attr">"type"</span>: <span class="hljs-string">"node"</span>,</span><br><span class="line"> <span class="hljs-attr">"request"</span>: <span class="hljs-string">"attach"</span>,</span><br><span class="line"> <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Attach by Process ID"</span>,</span><br><span class="line"> <span class="hljs-attr">"processId"</span>: <span class="hljs-string">"${command:PickProcess}"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="hljs-attr">"type"</span>: <span class="hljs-string">"node"</span>,</span><br><span class="line"> <span class="hljs-attr">"request"</span>: <span class="hljs-string">"launch"</span>,</span><br><span class="line"> <span class="hljs-attr">"runtimeVersion"</span>: <span class="hljs-string">"4.6.1"</span>,</span><br><span class="line"> <span class="hljs-attr">"name"</span>: <span class="hljs-string">"启动程序"</span>,</span><br><span class="line"> <span class="hljs-attr">"program"</span>: <span class="hljs-string">"${workspaceFolder}/index.js"</span>,</span><br><span class="line"> <span class="hljs-attr">"args"</span>: [</span><br><span class="line"> <span class="hljs-string">"param"</span></span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h4 id="request-区分两种启动方式"><a href="#request-区分两种启动方式" class="headerlink" title="request 区分两种启动方式"></a>request 区分两种启动方式</h4><ol>
<li>attach</li>
<li>launch</li>
</ol>
<h5 id="attach"><a href="#attach" class="headerlink" title="attach"></a>attach</h5><p>连接调试法，这种调试相对与 Node.js 应用独立。在取消 debug 的时候通常也不会影响到 Node.js 应用。</p>
<p>attach 调试通过不同的连接方式也区分两种</p>
<ul>
<li>连接进程<ol>
<li>必传 <code>processId</code> 字段，<code>processId</code> 是应用的进程 id，在代码中也可以通过 process.pid 查看</li>
<li>可以在 launch.json 中配置，也可以使用 Debug: Attach to Node Process 命令快速连接</li>
<li>因为 <code>processId</code> 是系统随机产生的，还是建议用上面的命令。</li>
<li><strong>只能用作本地 debug</strong></li>
</ol>
</li>
<li>连接端口<ol>
<li>需要 <code>address</code> 和 <code>port</code> （address 不能加上协议，不然会认为指定了端口号）</li>
<li>port 不是应用的服务器端口，而是专门用来调试的端口，默认 9229</li>
<li>本地与远程 debug，都可以使用</li>
</ol>
</li>
</ul>
<blockquote>
<p>本质上两种原理是一样的，只是在用法上有点不同，端口必开进程这个就不说了。连接进程的时候，其实也是在进程上开一个 debug 端口。</p>
</blockquote>
<h4 id="一些通用配置"><a href="#一些通用配置" class="headerlink" title="一些通用配置"></a>一些通用配置</h4><ul>
<li>type：调试的类型，前端开发用的比较多的是 <code>node</code> 和 <code>chrome</code></li>
<li>request：调试方式来，可选的有 <strong>attach</strong> 和 <strong>launch</strong></li>
</ul>
<h4 id="Attach配置"><a href="#Attach配置" class="headerlink" title="Attach配置"></a>Attach配置</h4><ul>
<li>processId：附加的进程 ID</li>
</ul>
<h4 id="Launch配置的"><a href="#Launch配置的" class="headerlink" title="Launch配置的"></a>Launch配置的</h4><ul>
<li>program：要调试的 Node.js 程序的绝对路径</li>
<li>args：命令行参数</li>
<li>runtimeExecutable：要使用的可执行文件，比如 npm、nodemon</li>
<li>runtimeArgs：传递给运行时可执行文件的可选参数</li>
<li>runtimeVersion：如果使用了 nvm，则可以指定要运行的版本</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<a href="/2019/01/21/quokka-js/" class="image is-7by1">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/2.jpg!/both/1500x750" alt="Quokka">
</a>
</div>
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2019-01-21T07:22:35.000Z">2019-01-21</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/utils/">utils</a> / <a class="has-link-grey -link" href="/categories/utils/vscode/">vscode</a>
</div>
<span class="level-item has-text-grey">
3 分钟 读完 (大约 500 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2019/01/21/quokka-js/">Quokka</a>
</h1>
<div class="content">
<p>Quokka.js 是 JavaScript 和 TypeScript 的快速原型操作平台。它会在您键入时立即运行代码，并在代码编辑器中显示各种执行结果</p>
<p>简单的来说，它就是可以让我们开发者们最小程度的进行快速小 demo 的工具</p>
<blockquote>
<p>官方简介：Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.</p>
</blockquote>
<p><a href="https://quokkajs.com/" target="_blank" rel="noopener">https://quokkajs.com/</a></p>
<h2 id="快速开始"><a href="#快速开始" class="headerlink" title="快速开始"></a>快速开始</h2><h3 id="下载插件"><a href="#下载插件" class="headerlink" title="下载插件"></a>下载插件</h3><p>在 vscode 中的插件管理中可以直接下载 Quokka.js</p>
<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><ol>
<li>在 vscode 编辑器中按 F1，输入 <code>New JavaScript File</code></li>
<li>编写你的 JavaScript 代码</li>
</ol>
<p>官方demo：</p>
<p><img src="https://quokkajs.com/assets/img/vsc1.gif" alt=""></p>
<h2 id="使用感受"><a href="#使用感受" class="headerlink" title="使用感受"></a>使用感受</h2><h3 id="很适合输出小-demo"><a href="#很适合输出小-demo" class="headerlink" title="很适合输出小 demo"></a>很适合输出小 demo</h3><p>默认使用当前的 node 环境，可以通过插件（<a href="https://github.com/wallabyjs/jsdom-quokka-plugin" target="_blank" rel="noopener">jsdom-quokka-plugin</a>）拓展到 window 对象<br>不需要保存就可以看到任何一段代码的输出，真的不要太快，很类似速写笔记本。</p>
<h3 id="直观"><a href="#直观" class="headerlink" title="直观"></a>直观</h3><p>比 debug 更加直观的体现每行代码</p>
<ul>
<li>绿色方块：行尚未执行</li>
<li>灰色方块：执行通过</li>
<li>黄色方块：仅部分执行</li>
<li>红色方块：源行是错误的来源，或者是错误的堆栈</li>
</ul>
<h3 id="清晰"><a href="#清晰" class="headerlink" title="清晰"></a>清晰</h3><p>和浏览器控制台一样的展开效果，对比与 node debug 要清晰</p>
<p><img src="https://quokkajs.com/assets/img/vsc-valexp.gif" alt=""></p>
<h2 id="存在的问题"><a href="#存在的问题" class="headerlink" title="存在的问题"></a>存在的问题</h2><p><strong>代码会自动通过 babel 去编译</strong>，这个可能不是开发者们想要的，比如</p>
<figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">import</span> fs <span class="hljs-keyword">from</span> <span class="hljs-string">'fs'</span></span><br><span class="line"></span><br><span class="line"><span class="hljs-built_in">console</span>.log(fs)</span><br></pre></td></tr></table></figure>
<p>这个不会报错，但是通过原生 node 下是无法直接执行的</p>
<h3 id="社区版和-Pro-版"><a href="#社区版和-Pro-版" class="headerlink" title="社区版和 Pro 版"></a>社区版和 Pro 版</h3><p>未付费的情况下，只能使用的是<strong>社区版</strong>。功能有限，比如无法导入其他模块，Pro 强大一点，但是要花掉几十块大洋。</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://www.zhihu.com/question/37623307/answer/72955853" target="_blank" rel="noopener">TDD（测试驱动开发）是否已死？</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<a href="/2019/01/19/跨域资源共享/" class="image is-7by1">
<img class="thumbnail" src="https://blog.zhangruipeng.me/hexo-theme-icarus/gallery/thumbnails/flower.jpg" alt="跨域资源共享">
</a>
</div>
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2019-01-19T10:16:57.000Z">2019-01-19</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/ajax/">ajax</a>
</div>
<span class="level-item has-text-grey">
几秒 读完 (大约 52 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2019/01/19/跨域资源共享/">跨域资源共享</a>
</h1>
<div class="content">
<blockquote>
<p>CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。</p>
</blockquote>
<figure class="highlight js hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Access-Control-Allow-Credentials: <span class="hljs-literal">true</span></span><br></pre></td></tr></table></figure>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<a href="/2018/12/07/test-01/" class="image is-7by1">
<img class="thumbnail" src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-2712.jpg" alt="Hello World">
</a>
</div>
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2018-12-07T06:29:28.221Z">2018-12-07</time>
<span class="level-item has-text-grey">
2 分钟 读完 (大约 361 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2018/12/07/test-01/">Hello World</a>
</h1>
<div class="content">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><div class="justified-gallery"><br><img src="http://csbun.github.io/blog/gallery/sri-lanka/P60412-162831.jpg" alt=""><br><img src="http://csbun.github.io/blog/gallery/sri-lanka/P60412-162831.jpg" alt=""><br><img src="http://csbun.github.io/blog/gallery/sri-lanka/P60412-162831.jpg" alt=""><br></div>
<h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="hljs-string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);</span><br><span class="line"><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>);</span><br><span class="line"></span><br><span class="line">init();</span><br><span class="line"></span><br><span class="line"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">init</span>(<span class="hljs-params"></span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// 创建浏览器，打开一个 page</span></span><br><span class="line"> <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.launch();</span><br><span class="line"> <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.newPage();</span><br><span class="line"></span><br><span class="line"> <span class="hljs-comment">// 访问 url</span></span><br><span class="line"> <span class="hljs-keyword">await</span> page.goto(<span class="hljs-string">'http://localhost:3000/'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="hljs-comment">/**</span></span><br><span class="line"><span class="hljs-comment"> * 开启 CSS Coverage 功能</span></span><br><span class="line"><span class="hljs-comment"> * @see https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.11.0&show=api-coveragestartcsscoverageoptions</span></span><br><span class="line"><span class="hljs-comment"> */</span></span><br><span class="line"> <span class="hljs-keyword">await</span> page.coverage.startCSSCoverage();</span><br><span class="line"></span><br><span class="line"> <span class="hljs-comment">// 录入用户交互</span></span><br><span class="line"> <span class="hljs-comment">// await page.hover('.section');</span></span><br><span class="line"></span><br><span class="line"> <span class="hljs-comment">// 停止收集并得到 cssCoverage</span></span><br><span class="line"> <span class="hljs-comment">// cssCoverage 是个数组，包含每个被引用的 css 文件</span></span><br><span class="line"> <span class="hljs-keyword">const</span> cssCoverage = <span class="hljs-keyword">await</span> page.coverage.stopCSSCoverage();</span><br><span class="line"></span><br><span class="line"> <span class="hljs-comment">// 调查 CSS Coverage并提取使用过的 CSS</span></span><br><span class="line"> <span class="hljs-keyword">let</span> cssUsedBytes = <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-keyword">let</span> cssTotalBytes = <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-keyword">let</span> coveredCssString = <span class="hljs-string">''</span>;</span><br><span class="line"></span><br><span class="line"> cssCoverage.forEach(<span class="hljs-function">(<span class="hljs-params">item</span>) =></span> {</span><br><span class="line"> <span class="hljs-keyword">const</span> { ranges, text } = item;</span><br><span class="line"></span><br><span class="line"> cssTotalBytes += text.length;</span><br><span class="line"></span><br><span class="line"> <span class="hljs-comment">// ranges 数组中标记了每一个使用过的 class</span></span><br><span class="line"> ranges.forEach(<span class="hljs-function">(<span class="hljs-params">range</span>) =></span> {</span><br><span class="line"> cssUsedBytes += range.end - range.start;</span><br><span class="line"> coveredCssString += <span class="hljs-string">`<span class="hljs-subst">${text.slice(range.start, range.end)}</span>\n`</span>;</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`总大小: <span class="hljs-subst">${cssTotalBytes}</span>`</span>);</span><br><span class="line"> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`使用到的大小: <span class="hljs-subst">${cssUsedBytes}</span>`</span>);</span><br><span class="line"></span><br><span class="line"> fs.writeFile(<span class="hljs-string">'./style.css'</span>, coveredCssString, (err) => {</span><br><span class="line"> <span class="hljs-keyword">if</span> (err) {</span><br><span class="line"> <span class="hljs-keyword">return</span> <span class="hljs-built_in">console</span>.log(err);</span><br><span class="line"> }</span><br><span class="line"> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'样式文件导出成功 ✌️!'</span>);</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="hljs-keyword">await</span> browser.close();</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2018-12-07T05:44:25.927Z">2018-12-07</time>
<span class="level-item has-text-grey">
1 分钟 读完 (大约 121 个字)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2018/12/07/hello-world/">Hello World</a>
</h1>
<div class="content">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="hljs-string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>
</div>
</div>
</div>
</div>
<div class="column is-4-tablet is-4-desktop is-3-widescreen has-order-1 column-left ">
<div class="card widget">
<div class="card-content">
<nav class="level">
<div class="level-item has-text-centered">
<div>
<img class="image is-128x128 has-mb-6" src="https://www.gravatar.com/avatar/a36e2d18566295c0412f75862c8f9564?s=500" alt="你的名字">
<p class="is-size-4 is-block">
你的名字
</p>
<p class="is-size-6 is-block">
前端狗
</p>
<p class="is-size-6 is-flex is-flex-center has-text-grey">
<i class="fas fa-map-marker-alt has-mr-7"></i>
<span>广州 · Guangzhou · 902</span>
</p>
</div>
</div>
</nav>
<nav class="level is-mobile">
<div class="level-item has-text-centered is-marginless">
<div>
<p class="heading">
文章
</p>
<p class="title has-text-weight-normal">
7
</p>
</div>
</div>
<div class="level-item has-text-centered is-marginless">
<div>
<p class="heading">
分类
</p>
<p class="title has-text-weight-normal">
5
</p>
</div>
</div>
<div class="level-item has-text-centered is-marginless">
<div>
<p class="heading">
标签
</p>
<p class="title has-text-weight-normal">
9
</p>
</div>
</div>
</nav>
<div class="level">
<a class="level-item button is-link is-rounded" href="http://github.com/ppoffice">
关注我</a>
</div>
<div class="level is-mobile">
<a class="level-item button is-white is-marginless" target="_blank" title="Github" href="http://github.com/dyun8080">
<i class="fab fa-github"></i>
</a>
<a class="level-item button is-white is-marginless" target="_blank" title="Facebook" href="http://facebook.com">
<i class="fab fa-facebook"></i>
</a>
<a class="level-item button is-white is-marginless" target="_blank" title="Twitter" href="http://twitter.com">
<i class="fab fa-twitter"></i>
</a>
<a class="level-item button is-white is-marginless" target="_blank" title="Dribbble" href="http://dribbble.com">
<i class="fab fa-dribbble"></i>
</a>
<a class="level-item button is-white is-marginless" target="_blank" title="RSS" href="/">
<i class="fas fa-rss"></i>
</a>
</div>
</div>
</div>
<div class="card widget">
<div class="card-content">
<div class="menu">
<h3 class="menu-label">
链接
</h3>
<ul class="menu-list">
<li>
<a class="level is-mobile" href="https://zhihu.com" target="_blank">
<span class="level-left">
<span class="level-item">知乎</span>
</span>
<span class="level-right">
<span class="level-item tag">https://zhihu.com</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card widget">
<div class="card-content">
<div class="menu">
<h3 class="menu-label">
分类
</h3>
<ul class="menu-list">
<li>
<a class="level is-marginless" href="/categories/ajax/">
<span class="level-start">
<span class="level-item">ajax</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/node/">
<span class="level-start">
<span class="level-item">node</span>
</span>
<span class="level-end">
<span class="level-item tag">2</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/npm/">
<span class="level-start">
<span class="level-item">npm</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/utils/">
<span class="level-start">
<span class="level-item">utils</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a><ul><li>
<a class="level is-marginless" href="/categories/utils/vscode/">
<span class="level-start">
<span class="level-item">vscode</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li></ul></li>
</ul>
</div>
</div>
</div>
<div class="column-right-shadow is-hidden-widescreen ">
<div class="card widget">
<div class="card-content">
<h3 class="menu-label">
最新文章
</h3>
<article class="media">
<a href="/2019/01/31/Node-全局包管理笔记/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/10.jpg!/both/1500x750" alt="Node 全局包管理笔记">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-31T06:37:10.000Z">2019-01-31</time></div>
<a href="/2019/01/31/Node-全局包管理笔记/" class="has-link-black-ter is-size-6">Node 全局包管理笔记</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/npm/">npm</a>
</p>
</div>
</div>
</article>
<article class="media">
<a href="/2019/01/29/debug-小记/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/6.jpg!/both/1500x750" alt="debug 小记">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-29T07:27:59.000Z">2019-01-29</time></div>
<a href="/2019/01/29/debug-小记/" class="has-link-black-ter is-size-6">debug 小记</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/node/">node</a>
</p>
</div>
</div>
</article>
<article class="media">
<a href="/2019/01/21/node-本地-debug-调试/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/3.jpg!/both/1500x750" alt="node 本地 debug 调试">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-21T09:06:04.000Z">2019-01-21</time></div>
<a href="/2019/01/21/node-本地-debug-调试/" class="has-link-black-ter is-size-6">node 本地 debug 调试</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/node/">node</a>
</p>
</div>
</div>
</article>
<article class="media">
<a href="/2019/01/21/quokka-js/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/2.jpg!/both/1500x750" alt="Quokka">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-21T07:22:35.000Z">2019-01-21</time></div>
<a href="/2019/01/21/quokka-js/" class="has-link-black-ter is-size-6">Quokka</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/utils/">utils</a> / <a class="has-link-grey -link" href="/categories/utils/vscode/">vscode</a>
</p>
</div>
</div>
</article>
<article class="media">
<a href="/2019/01/19/跨域资源共享/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="https://blog.zhangruipeng.me/hexo-theme-icarus/gallery/thumbnails/flower.jpg" alt="跨域资源共享">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-19T10:16:57.000Z">2019-01-19</time></div>
<a href="/2019/01/19/跨域资源共享/" class="has-link-black-ter is-size-6">跨域资源共享</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/ajax/">ajax</a>
</p>
</div>
</div>
</article>
</div>
</div>
<div class="card widget">
<div class="card-content">
<div class="menu">
<h3 class="menu-label">
归档
</h3>
<ul class="menu-list">
<li>
<a class="level is-marginless" href="/archives/2019/01/">
<span class="level-start">
<span class="level-item">一月 2019</span>
</span>
<span class="level-end">
<span class="level-item tag">5</span>
</span>
</a>
</li>
<li>
<a class="level is-marginless" href="/archives/2018/12/">
<span class="level-start">
<span class="level-item">十二月 2018</span>
</span>
<span class="level-end">
<span class="level-item tag">2</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card widget">
<div class="card-content">
<h3 class="menu-label">
标签云
</h3>
<a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/browser/" style="font-size: 10px;">browser</a> <a href="/tags/debug/" style="font-size: 15px;">debug</a> <a href="/tags/node/" style="font-size: 20px;">node</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/vscode/" style="font-size: 10px;">vscode</a> <a href="/tags/yarn/" style="font-size: 10px;">yarn</a> <a href="/tags/单元测试/" style="font-size: 10px;">单元测试</a> <a href="/tags/测试驱动开发/" style="font-size: 10px;">测试驱动开发</a>
</div>
</div>
</div>
</div>
<div class="column is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right ">
<div class="card widget">
<div class="card-content">
<h3 class="menu-label">
最新文章
</h3>
<article class="media">
<a href="/2019/01/31/Node-全局包管理笔记/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/10.jpg!/both/1500x750" alt="Node 全局包管理笔记">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-31T06:37:10.000Z">2019-01-31</time></div>
<a href="/2019/01/31/Node-全局包管理笔记/" class="has-link-black-ter is-size-6">Node 全局包管理笔记</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/npm/">npm</a>
</p>
</div>
</div>
</article>
<article class="media">
<a href="/2019/01/29/debug-小记/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/6.jpg!/both/1500x750" alt="debug 小记">
</p>
</a>
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2019-01-29T07:27:59.000Z">2019-01-29</time></div>
<a href="/2019/01/29/debug-小记/" class="has-link-black-ter is-size-6">debug 小记</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/node/">node</a>
</p>
</div>
</div>
</article>
<article class="media">
<a href="/2019/01/21/node-本地-debug-调试/" class="media-left">
<p class="image is-64x64">
<img class="thumbnail" src="http://dyun-assets-images.test.upcdn.net/4k/3.jpg!/both/1500x750" alt="node 本地 debug 调试">
</p>
</a>