Angular專案 如何在Chrome 的開發小工具DevTool Debug 下中斷點

-

Angular專案 如何在Chrome 的開發小工具DevTool Debug 下中斷點

因為在Angular專案下,透過Page的樹狀工具是找不到,ts 腳本的,還好 ng server 可以補足這個缺點,所以寫一下如何找到腳本的方法
只有在 ng dev server ,才找的到,如果deploy到 prod server 就無法找到ts 腳本

1. 先透過 ng CLI 啟動 Dev Server

ng serve
在console 會顯示
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

打開Chrome 瀏覽器

  1. 開啟 http://localhost:4200/
看你專案的啟動設定,有可能port 或 path 不一定
  1. 打開開發者工具 (DevTool)
按下 F12
3.到 Sources 下,打開open file
Alt text
4.輸入你要debug 的腳本
檔名就如專案中的檔名一至
只有在 ng dev server ,才找的到,如果deploy到 prod server 就無法使用中斷點了
5.可以下中斷點了
Alt text
Google DevTool 中斷點 詳細教學 : https://developers.google.com/web/tools/chrome-devtools/javascript?hl=zh-tw





md code:

留言

張貼留言

這個網誌中的熱門文章

angular 如何Http 如何設定 CORS (Cross-Origin Resource Sharing)

-
如果要對所有送出的 Request 做調整 之前我在寫後台的,就可以使用AOP的方式實作, 而Angular也有類似的架構 如果我們用  @angular/common/http  Angular只要實作 HttpInterceptor  interface就可以了 實作 HttpInterceptor 在cmd輸入 ng g service BasicAuthHtppInterceptor 已建立BasicAuthHtppInterceptorService ,修改內容如下 import { Injectable } from '@angular/core' ; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http' ; @Injectable ({ providedIn: 'root' }) export class BasicAuthHtppInterceptorService implements HttpInterceptor { constructor ( ) { } intercept(req: HttpRequest< any >, next: HttpHandler) { req = req.clone({ setHeaders: { /*有關CORS的參數就可以改在這裡了*/ 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS, PATCH' , 'Access-Control-Max-Age' : '86400' } }); return
閱讀完整內容

Google Map 單車路徑計算坡度和角度小工具

-
圖片
  Google Map 單車路徑計算坡度和角度小工具 本人最近開始稍微開始認真騎腳踏車,然後我常用google map 去安排路線(癡迷上自己亂排路線的快感 XD) 但是常常google會帶入非人性化的路線,例如用走的都幾乎走不上去,於似乎本人找了幾個工具 像是 bikeroll 非常直觀好用,但是坡度顯示不精準 (12% ~ 48% <--- 48%會往生XD) 所以本人就想說來開發一個能夠自己決定每幾公尺就計算這個區段的坡度的工具,工具網址如下 https://mapsteepness.web.app 源始碼 Github :  https://github.com/kirinchen/map-steepness-gradient 設定教學 一進入網站就會先到設定頁  https://mapsteepness.web.app/config 設定基本參數 設定說明 A: 設定語系 B: 設定每幾公尺為一個路徑 C :設定 Google Map 金鑰,請看此  教學 Google Map 金鑰要啟用 Directions API / Maps Elevation API / Maps JavaScript API 三個服務 啟用服務教學 :  教學 為什麼要此金鑰,因為Google這幾年增加圖資的費用,所以很多地圖相關的APP都取消服務,而我們採用各自申請金鑰來提供此服務,且沒有超過一定的使用量基本上是免費的 操作教學 1. 準備單車路徑的KML檔案 google map 匯出KML教學 範例檔案 ：  點我下載 KML  Wiki 2. 匯入KML檔案到 mapsteepness 系統中 :  連結   3. 等匯入完成 就可以點選 路徑列表   4. 查看此次路徑，的每個路徑分段，並選擇要在地圖上觀察的分段 可以用上面的過濾器 透過夾角或是坡度來篩選 要的路徑 起點/終點 : 標示路段起點/終點的經緯度 距離 : 該路段的長度 海拔 : 終點的海拔高度 坡度/夾角 : 該路段的爬升坡度,與夾角 選取 : 選區的路段可以顯示在地圖上 5. 顯示在地圖上  5.1 點選其中的一段的路徑 點擊地圖標示 起點/終點   : 起點   : 終點 點擊後可以看到 海拔 / 該路段距離/ 坡度 等資訊 點擊 Open Gmap : 開啟該點位在google map 
閱讀完整內容

Google URL Shortener API 快速教學

-
圖片
有時候需要短網址時,都會用到 估哥大神 的 goo.gl  那麼可否透過程式就可以使用! 答案是可以的, 這邊就如何透過Rest 去呼叫 這個API 先去 google dev consloe  點選  URL Shortener API 然後點擊啟用,  點擊完會看到下圖,最後的字樣要是"停用"就表示啟用成功 然後點擊憑證 建立憑證,選擇API Key 選擇 瀏覽器憑證(看需要什麼平台,然後選擇什麼) 然後設定憑證的設定 那麼基本上,可你的網站的domain,那我為了Test ,所以就填 * (填 * 是很危險的,任何人都可以使用) 然後按"建立" 複製API Key 本人是透過Rest Test 小工具( PostMan )來測試的 那測試如下 那麼Rest 資訊如下 url : https://www.googleapis.com/urlshortener/v1/url?key={API_KEY} header :         Content-Type = application/json Request body  {"longUrl": "{要縮短的網址}"} Response Body {     "kind": "urlshortener#url",     "id": "{你要的短網址}",     "longUrl": "http://www.google.com/" } BTW 剛申請完 不會馬上有效,要等大概5分鐘
閱讀完整內容