在購物車結帳流程中，常會因為導向外部支付頁面而導致 Network 面板刷新，使得剛發出的 Checkout API 請求紀錄消失。為了解決這個問題，Chrome DevTools 提供了 Preserve log 功能。

職場

學習

以行動支持創作者！付費即可解鎖

軟體開發

歡迎來到我的部落格！這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術，喜歡追求最新的網頁開發趨勢，並將這些知識分享給大家。




Shang的 前端開發筆記

Chrome

網站

結帳

工程師

如何讓 Chrome DevTool上Network 在頁面跳轉時，保留之前的紀錄【工程師實戰Debug】

CatHelper是我開發的前端 SideProject，是貓咪募資收養的一站式平台。

我用戶使用流程、資料庫、頁面來構思這個專案。

寵物

CatHelper開發手記_太乙之初，專案設計與發想





不同的運算子一起出現時，會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。

雖然有表格可以供我們查找，但是總不可能每一次用到運算子的時候，我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。

那麼就讓我來分享我如何理解與記憶這張表吧!

運算子在做甚麼

創作

如何用故事記憶法記住 JavaScript 運算子優先順序表





當前大多數網站不再是靜態網站，需要向後端的 Server 請求資料。而且，這些資料的請求通常是非同步進行的。在React中，目前被視為最佳實踐的方式是使用 useEffect。


音樂藝文

React如何處理非同步的資料-useEffect的使用方法與設計影響

我在學習vue的過程中，一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑，原因是有沒有用vite建構，在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。



起手式

1.非建構:使用cdn

在html的header中插入以下script標籤

<s

職場產業

Vue的開發筆記-建構與不建構的元件寫法差異

我相信大家應該都有在表單上看過開關元件，那麼我們會拿它來做甚麼?要怎麼把它做出來?



如何製作開關元件(Toggle Switch)

Media query可以很複雜，但是這裡KP只談最簡單、最實用的基礎。



國際

Media query最簡單的基礎-跟著KP用21天征服Responsive Layout-W3

對於前端工程師而言，如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。

因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。





Flexbox基礎-處理圖片-跟著KP用21天征服Responsive Layout-W2

在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情，所以我們在開發上會傾向於對flex-item設置width。



flex-item

跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的width與對齊

在學習了flexbox的起手式之後，讓我們來檢視與優化html結構吧。





<section class="three-col"> 	
<div class="container">   	
	<div class="row">    <!-

Shang的前端開發筆記

Shang的前端開發筆記

Shang的 前端開發筆記

Shang的 前端開發筆記

Shang的前端開發筆記

Shang的前端開發筆記