Chrome Dev Tool 介紹
身為一個網頁工程師,一定天天會跟瀏覽器為伍,無論是要看畫面有沒有符合需求,或是看網頁有沒有正確收到資料,而DevTools以一定會時常開啟的,但在還沒深入研究前,我之知道這個可以用來看console.log(),但到了現在,我才了解他不只這些功能而已,以下就讓我來介紹我平常時常用到的功能吧(這邊以chrome當作範例)
身為一個網頁工程師,一定天天會跟瀏覽器為伍,無論是要看畫面有沒有符合需求,或是看網頁有沒有正確收到資料,而DevTools以一定會時常開啟的,但在還沒深入研究前,我之知道這個可以用來看console.log(),但到了現在,我才了解他不只這些功能而已,以下就讓我來介紹我平常時常用到的功能吧(這邊以chrome當作範例)
Workona
前言
在前幾篇的內容中,有非常簡單的介紹透過command line來操作git,接下來這邊要介紹的是透過別人寫好的GUI操作介面來操作之前的動作,相信有之 前的大致概念,在操作這些動作會相對地更佳了解原理
https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/
在網頁開發的時候,我蠻常會有以下情況發生
在coding的過程中,除了你的開發工具之外,另一個最常用的不外乎就是google了,當你的程式出現錯誤時,直接把錯誤資訊貼到google上,基本上就可以找到解答或是debug的方向
1. 安裝docker for window
在windows中要跑ubuntu,除了安裝VM來跑之外,近幾年windows提供了直接使用同一台電腦來使用linux的服務,WSL(Windows Subsystem for Linux)
在開發程式時,有時候想要測試一點小功能,確認說這個功能可不可以使用,如果說每次都要為了測試這點功能就大費周章的在自己的電腦佈置環境來測試,總是有點大費周章
在現在這種講求快速開發的開發模式,我們通常不太會自己將所有功能都自己硬刻出來,而是會去使用第三方的套件來跟自己的系統做串接,這時候就會需要去閱讀他的說明文件,或是去讀他的 原碼,來推敲出這個套件是如何使用的
透過系統內建的hosts設定來完成將localhost設定成有網址的內容,但如果需要同時讓多個網頁都有網址,那透過原本的hosts是無法進行的(因為他僅能將你的要求轉到80port),就要倚靠其他工具的幫忙了
在一般網頁開發中,為求方便,通常測試的瀏覽器跟正在開發的程式碼會放出現在同一台電腦中
在平常開發的過程中,都是在自己的本機上瀏覽,如果想要將你做好的作品給別人看,不外乎就是要將你的code傳到有獨立ip的地方,才有辦法讓其他人看到你的作品,但如果只是要給其他人看一下作品的內容,這樣也太費工夫了,這時候,ngrok就可以幫你一個忙
在linux base的環境中,除了一般的安裝檔的安裝方法,還可以直接透過指令一口氣安裝完所需要的軟體,之前認為windows應該沒辦法做到類似的效果,直到有一天我看到了chocolatey
在學習程式的路上,一定會看各式各樣的教學,無論是書籍,文章,或是影片
Git除了版本控制,還可以透過Git來傳輸程式碼來部屬環境 或是多人協作,而Git的存放環境除了可以放在像是gitlab/github等雲端空間,可以透過自己架設git server來處理,這邊就介紹一種最簡單的架設方式
課程選擇
通常在製作說明文件時,都需要大量的截圖以及文字敘述才有辦法完成一個操作文件,但在windows中,有提供一個特別的小工具,可以把你螢幕上的畫面以及你點擊的內容全部記錄下來,並且變成一份文件,讓其他人閱讀,那就是"步驟收錄程式"
身為一個windows筆電用戶,常常聽到mac book用戶說他們的觸控板多好用多好用,甚至還有說用了觸控板,就不會想要回去用滑鼠了,實際體驗完後,也真的發現mac的觸控板真的有點小方便
有時候在跟別人敘述說你程式的邏輯或是資料流時,會使用流程圖來表示,而以往的流程圖畫法不外乎就是拿出真的紙筆來畫,或是透過類似draw.io這類的拖拉畫面的輔助工具產生一個電子檔,但有時候我總是覺得自己拉這類的流程圖會有種畫面沒對齊或是沒有置中,有很多時間都是在調整他的高低,所以就在想說有沒有可以透過輸入程式碼,就可以自動產生流程圖的工具,就找到了這個工具-Umlet