Cách debug JavaScript trong Visual Studio Code
Debug là một kỹ năng mà bất kỳ developer nào cũng phải biết. Dù bạn phát triển ứng dụng nhỏ xíu tới ứng dụng to đùng, bạn khó tránh khỏi việc phải tiến hành debug. Nếu bạn sử dụng Android Studio, Xcode hay Visual Studio… để phát triển ứng dụng thì việc đặt breakpoint khi debug rất đơn giản. Nhưng với các ứng dụng Node.JS sử dụng Visual Code để viết, đặc biệt là ứng dụng Node.JS kết hợp TypeScript làm ngôn ngữ lập trình thì sẽ gặp đôi chút khó khăn. Bài viết này, mình sẽ chỉ cho bạn cách thiết lập môi trường phát triển với VS Code để debug dễ dàng. Để các bạn dễ hình dung hơn, chúng ta sẽ tiến hành thực hiện từ lúc tạo project tới lúc debug typescript nhé. Nội dung chính của bài viết
Tạo project NodeJS mớiTạo một thư mục để chứa mã nguồn dự án, đặt tên là “vscode-typescript-debugging”. Sau đó, tạo thư mục src và thêm tệp “app.ts” với nội dung sau: import { hello } from './hello'; class App { /** Entry point of our app */ public static start() { console.log(hello('world')); } } App.start(); Thêm một tệp “hello.ts” vẫn trong thư mục src /** Say hello */ export const hello = (name: string) => { const greeting = `Hello ${name}!`; return greeting; }; Với bài viết này, dự án của chúng ta chỉ cần như vậy là đủ, không cần phức tạp quá. Ngoài ra, bạn có thể tham khảo cách tạo dự án NodeJS tự động bằng công cụ CLI tại đây. TypeScript compilerSau khi tạo dự án xong, bước tiếp theo là cần biên dịch mã TypeScript thành mã javascript. Bạn nên nhớ, trình duyệt chỉ hiểu được 3 ngôn ngữ: HTML, CSS và Javascript. Do đó, dù bạn viết ứng dụng bằng bất kỳ ngôn ngữ gì đi chăng nữa thì cuối cùng cũng phải complile chuyển nó về 3 ngôn ngữ trên. Trong thư mục chính của dự án, bạn thêm tệp cấu hình “tsconfig.json” với nội dung như sau: { "compilerOptions": { "outDir": "./out", "rootDir": "./src", "sourceMap": true, "moduleResolution": "node", "target": "es5" } } Đây là những option cơ bản nhất cho trình biên dịch TypeScript, nếu bạn cần cấu hình thêm các options khác nữa thì có thể tham khảo tài liệu chính thức tại đây. Điểm mấu chốt trong đoạn cấu hình trên là bạn phải bật option sourceMap thành true. Những tệp sourceMap được tạo ra để làm ánh xạ giữa TypeScript với Javascript khi debug. Note: Nếu bạn đã cài đặt TypeScipt theo phạm vi global bằng lệnh: NPM-ScriptsPhần tiếp theo, chúng ta tạo tệp “package.json”, đây là tệp cấu hình chung của cả dự án. Tất cả các dự án Node.JS đều cần phải có tệp này. Cách tạo tệp package.json bằng lệnh như sau: npm init –yes Sau đó, chúng ta cài đặt Typescript cho dự án npm install typescript --save-dev Nội dung của tệp package.json sẽ như sau: { "name": "vscode-typescript-debugging", "version": "1.0.0", "devDependencies": { "typescript": "^2.7.2" }, "scripts": { "start": "node out/app.js", "prestart": "npm run build", "build": "tsc" } } Mình sẽ giải thích ngắn gọn nội dung trong thẻ scripts. Thẻ này để chúng ta định nghĩa các câu lệnh npm. Ví dụ như ở trên, thẻ Mở cửa sổ lệnh tại thư mục của dự án và gõ lệnh: npm start OK, vậy là chương trình đã chạy, giờ bạn muốn debug thì làm thế nào? Mời bạn xem tiếp bước sau. DebuggingVẫn trong thư mục dự án, bạn tạo thêm thư mục “.vscode” và thêm tệp ‘launch.json” với nội dung như sau: { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Build Project", "program": "${workspaceFolder}\\src\\app.ts", "preLaunchTask": "npm: build", "sourceMaps": true, "smartStep": true, "internalConsoleOptions": "openOnSessionStart", "outFiles": [ "${workspaceFolder}/out/**/*.js" ] } ] } Note: Trong nhiều trường hợp, khi bạn chuyển sang thẻ debug trên Visual Code, nếu bạn chưa tạo tệp launch.json thì VS Code cũng tự động tạo sẵn cho bạn. Mình sẽ giải thích ngắn gọn nội dung cấu hình ở trên:
Ok, vậy là chúng ta đã cấu hình xong, giờ để debug typescript, bạn làm như bình thường, đặt breakpoint và chạy chương trình để gọi dòng code mà bạn vừa đặt breakpoint. Breakpoints có điều kiệnPhần này mình nói thêm thôi, bạn thường sử dụng breakpoint có điều kiện khi cần debug các vòng lặp. Bạn có muốn cứ phải ấn F8 để bỏ qua bước lặp này, và chờ cho tới bước lặp mà bạn muốn không? Nếu vòng lặp có hàng nghìn bước thì sao? Đây là lúc cần tới breakpoint có điều kiện. Với breakpoint có điều kiện, bạn có thể sử dụng “Expression” hoặc “Hit Count” để làm điều kiện.
Tạm kếtVS Code thực sự là một trình Text Editor nhỏ nhưng vô cùng mạnh, cung cấp rất nhiều tùy chọn để bạn phát triển dự án, đặc biệt là các dự án liên quan tới Javascript. Mình hi vọng bài viết hướng dẫn debug typescript này sẽ có ích cho bạn. 😃 Đọc thêm:
|