第十五章-開發環境
阿新 • • 發佈：2020-08-06
開發環境
- git
- 除錯工具
- 抓包
- webpack babel
- linux 常用命令
git相關知識
關於git的安裝與配置，可以參考git安裝並與遠端倉庫關聯相關配置
常用的 git 命令
| 命令 | 描述 |
|---|---|
git add . |
新增修改或增加的檔案 |
git checkout 檔名 |
撤銷修改 |
git commit -m '提交內容的說明資訊' |
提交程式碼到本地倉庫 |
git push origin master |
提交到遠端伺服器 |
git pull origin master |
從遠端伺服器拉取最新程式碼 |
git branch |
檢視分支 |
git checkout 分支名 |
切換分支 |
git checkout -b 分支名 |
新建分支並切換到該分支 |
git merge 分支 |
合併該分支 |
git log |
檢視git日誌 |
git status |
檢視當前檔案狀態 |
git diff |
檢視修改的檔案，按 q 可以退出檢視 |
當多人同時修改一行程式碼時，會導致程式碼衝突，而vscode在編輯器中提供了程式碼衝突的快捷解決方案，可以使開發者快速解決衝突。
如果直接在master分支上修改而忘記切換到新分支該怎麼做？
- 由於在master分支修改了程式碼，因此無法切換分支。
- 使用
git stash命令，相當於是把修改過的程式碼放到另一個區域 - 然後就可以使用
git checkout切換到新分支 - 在新分支上使用
git stash pop將剛剛暫存的修改過的程式碼釋放出來 - 然後新分支就可以正常使用
git add .git commit -m '提交程式碼'提交程式碼了
使用 chrome 除錯程式碼
一般面試不會考，但是前端工程師必備技能。
Elements： 展示DOM元素，除錯css
Console： 控制檯，除錯 js 程式碼
Application： 檢視和操作 cookie、localStorage、sessionStorage
Network： 資源的載入，包括文件、css、js、ajax載入等
source： 在檔案中新增 debugger 相當於打斷點，也可以在瀏覽器中打斷點
移動端抓包
---------------實際用到在做總結
- 移動端 h5 頁，檢視網路請求，需要使用抓包工具
- window 一般用 fiddler
- Mac OS 一般用 charles
過程：
- 手機和電腦連線同一個區域網
- 將手機代理到電腦上
- 手機瀏覽網頁，即可抓包
wbepack 和 babel
---------------一直在使用，後續瞭解
- ES6模組化，瀏覽器暫不支援
- ES6語法，瀏覽器並不完全支援
- 壓縮程式碼，整合程式碼，以讓網頁載入更快
ES6模組化
--------------一直在用，但對其概念不是很清楚
export
import
常用的linux命令
- 線上機器一般都是linux系統
- 測試機也需要保持一致用linux
- 測試機或者線上機出了問題，本地又不能復現，需要去排查
| 命令 | 描述 |
|---|---|
| ssh 使用者名稱@ip地址 | 回車輸入密碼，登陸到 linux 系統 |
| ls (-a) | 檢視(所有的)檔案和資料夾 |
| ll | 以列表的形式檢視檔案和資料夾 |
| clear | 清屏 |
| mkdir 資料夾名稱 | 建立資料夾 |
| rm -rf 資料夾名稱 | 刪除資料夾以及裡面的所有內容 |
| cd 目錄名（檔案） | 切換到該目錄下 |
| mv index.html index1.html | 修改 index.html 名字為 index1.html |
| mv index.html ../ | 移動 index.html 到上一級目錄 |
| cp a.js a1.js | 將 a.js 拷貝為 a1.js |
| touch d.js | 新建一個 d.js |
| vi d.js | 新建一個 d.js 並且開啟 |
| cat 檔名 | 檢視檔案的所有內容 |
vi d.js 可以新建一個 d.js 並且開啟，按鍵盤上的 i 可以進行編輯(左下角顯示 INSERT)，編輯完成之後，點選左上角的 esc 鍵可以退出編輯模式，按 :w 表示儲存（寫入），按 :q 表示退出。vimtutor 有vim的使用教程