---
# System prepended metadata

title: 網頁列印開發者工具

---

>:point_right: <font color="blue">**緣由**</font>
>
>**使用開發者工具開啟print檢查是否有讓網頁讀到所寫的CSS**
>

---
```htmlmixed
<div class="print">
  <p class="no-print">------ 網頁顯示 ------</p>
  <hr>
  <p>------ 列印顯示 ------</p>
</div>
```
```css
@media print{
  .no-print{ display: none; }
}
```
### 開啟開發者工具print檢查模式
**STEP 1.**

![](https://hackmd.io/_uploads/rJgl-ZBFn.jpg)

**STEP 2.**

![](https://hackmd.io/_uploads/BybX-WrYh.jpg)

**STEP 3.**

![](https://hackmd.io/_uploads/SkCQ--HFn.jpg)

---

:star: **結論：**

**實際上還是要用網頁列印(ctrl+p)預覽列印畫面**

---
# 線上工具自動製作SVG簡易動畫

![](https://hackmd.io/_uploads/ryJFWq5F2.jpg)

https://svgartista.net/

---
# 小工具

![](https://hackmd.io/_uploads/B1laVtsF3.jpg)

https://omatsuri.app/
