Giáo trình Khắc phục lỗi và debug website

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN
TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI

GIÁO TRÌNH
KHẮC PHỤC LỖI VÀ DEBUG WEBSITE
NGHỀ: THIẾT KẾ TRANG WEB

Hà Nội, năm 2020

1


2


BÀI 1: TỔNG QUAN VỀ DEBUG
•

Khái niệm chung về bug và debug
Việc lập trình 1 website ln gắn liền với debug và fixbug thì mới hồn thành được việc thiết
kế website hoàn chỉnh. Debug là một kĩ năng nền tảng của lập trình viên. Mục đích của debug
để loại bỏ lỗi (error) khỏi chương trình, cịn giúp lập trình viên hiểu rõ hơn về việc thực thi
chương trình. Một lập trình viên khơng có khả năng debug hiệu quả thì cũng giống như bị mù
vậy.
Trên thực thế các lập trình viên dùng nhiều thời gian để gỡ lỗi hơn là việc code mới, tạo ra
chức năng mới. Fix bug là quá trình sau khi debug, sau khi tìm ra lỗi của chương trình thì tiến
hành sửa lỗi chính là fixbug. Hai kỹ thuật debug và fixbug trong thiết kế website khá quan
trọng với 1 lập trình viên.
•

Bug là gì?

-

Bug trong tiếng anh là bọ, bọ ở đây là ám chỉ các lỗi xảy ra trong logic, hay bất kỳ vấn đề
gì gây ra việc làm cho ứng dụng khơng thực thi được hoặc thực thi sai.
Bug luôn tiềm ẩn ở mọi nơi, và ta không thể lường trước được mọi tình huống có thể xảy
ra mà chỉ có thể cố gắng làm giảm nó đến mức thấp nhất có thể tùy vào khả năng của ta tại

-

thời điểm phát triển và bảo trì ứng dụng.
-

Cụ thể trong website, bug là những lỗi về mặt giao diện, tính năng hoạt động sai hoặc
khơng như mong muốn của lập trình viên.

Bug gây ra những ảnh hưởng xấu đến trang web

3


•

Debug là gì?

-

Debug là quá trình tìm kiếm ra lỗi hay nguyên nhân gây ra lỗi (bug ở đâu) để có hướng
sửa lỗi (fix bug). Việc kiểm sốt lỗi của rất nhiều các dịng code là việc khơng hề đơn giản

-

với những người lập trình viên chưa có nhiều kinh nghiệm.
Chuyện xảy ra lỗi trong hàng nghìn dịng lệnh đó là chuyện bình thường đối với bất cứ 1
người làm lập trình nào. Chương trình có thể chạy khơng đúng ý người lập trình, hoặc chạy
sai chức năng nó được quy định, gây cho chương trình bị đánh giá kém chất lượng. Vậy
khi bị lỗi thì các lập trình viên phải debug để fix lỗi giúp cho chương trình (program) chạy
tốt, đúng u cầu, mong muốn.

-

Mục đích của Debug khơng chỉ là để loại bỏ lỗi (error) khỏi chương trình mà quan trọng
hơn cịn để giúp lập trình viên hiểu rõ hơn sự thực thi của chương trình.

Debug cũng giúp lập trình viên cải thiện trình độ

•

Các phương pháp debug
Kĩ năng debug và fixbug trong thiết kế website phần lớn là đến từ kinh nghiệm, có thể là kinh
nghiệm cả chính bản thân, có thể là được chia sẻ từ người khác. Hoặc đó cũng là một loại
năng khiếu bẩm sinh, năng khiếu sử lý lỗi, tức là sinh ra đã có rời, thời gian sử lý bug thường
rất nhanh và hầu như khơng gặp một chút khó khăn gì cả.

4


Tuy nhiên, cả hai con đường, hoặc đến từ kinh nghiệm rèn luyện, hay từ bẩm sinh đi nữa, đều
có những đặc điểm chung.
❖

Debugging Tool – dùng công cụ để Debug – là phương pháp Debug đi sâu vào source code
nhất. Thường thì chúng ta gọi những Debugging Tool này là Debugger.

Sử dụng công cụ để debug
❖

Printlining: đơn giản là bạn thêm vào source code của bạn những dòng lệnh để in ra
những thông tin mà bạn cần theo dõi trong q trình thực thi.

Debug sử dụng phương pháp printlining

• Logging: tạo ra một biểu mẫu để ghi (log) lại những thơng tin sau khi chương trình
thực thi. Phân tích nguyên nhân lỗi dựa trên những thông tin này.

5


Biểu mẫu ghi lại thông tin thực thi
3. Các công cụ debug
Để Debug hiệu quả ngồi trình độ của lập trình viên thì bạn cũng cần đến sự hỗ trợ của các
công cụ chuyên nghiệp. Dưới đây là một số cơng cụ hữu ích:
• Cơng

cụ Debugging Tool

Cơng cụ Debugging Tool hay còn gọi là Debugger, được dùng để hỗ trợ Debug chun sâu.
Nó giúp lập trình viên đi sâu vào các source code.
Thông thường các Debugger thường sử dụng các phần mềm như GNU Debugger, Microsoft
Visual Studio Debugger. Chúng được thiết kế dựa theo nền tảng của hệ thống nhúng gọi là

Embedded System, Tuy nhiên các thiết kế nhúng không mang mục đích chính, nó chỉ được
dùng làm các platform riêng với mục đích đơn lẻ nhưng lại địi hỏi các yếu tố đặc thù.
• Cơng

cụ Print Lining

Cơng cụ này được sử dụng khá phổ biến bởi cách dùng của nó rất đơn giản. Bạn chỉ việc thêm
Print Lining vào dịng lệnh trong q trình thực thi thơng tin.
Ví dụ như bạn sử dụng cơng cụ này thì khi dùng Arduino IDE sẽ khơng xuất hiện Debugger.
Trong đó cách Debug có hiệu quả cao và phù hợp với cơng cụ này nhất là Serial.print.

6


• Cơng cụ Logging
Cơng cụ Logging có khả năng tạo ra các biểu mẫu. Nó được dùng để lưu lại các thơng tin sau
khi chương trình hoạt động. Nhờ có cơng cụ này, lập trình viên có thể tìm, phân tích ngun
nhân gây ra lỗi để từ đó chọn phương pháp khắc phục phù hợp.
Là một lập trình viên việc nắm rõ Debug là gì và cách tìm, khắc phục nó ra sao là điều rất cần
thiết. Tuy nhiên, nếu bạn là “tay mơ” thì nên tìm đến các chuyên gia để được hỗ trợ và hướng
dẫn một cách cụ thể.

7


BÀI 2: DEBUG JAVASCRIPT

1. Các cơng cụ debug JavaScript
• Cơng cụ dành cho nhà phát triển trên các trình duyệt
• Công cụ dành cho nhà phát triển Chrome

Các công cụ dành cho nhà phát triển Chrome là một cách nhanh chóng để gỡ lỗi mã
JavaScript của bạn. Bạn có thể mở Công cụ Dev cho tab Bảng điều khiển bằng cách sử dụng
các phím tắt sau:

macOS: `CMD` +` OPT` + `I`
Windows: `CTRL` +` SHIFT` + `I`

Giao diện công cụ Chrome Dev Tools
Công cụ dành cho nhà phát triển Chrome là một trong những công cụ tốt nhất trong ngành
và nhiều nhà phát triển tin tưởng các công cụ này cho nhu cầu gỡ lỗi hàng ngày của họ.
Công cụ dành cho nhà phát triển Chrome bao gồm bảng điều khiển JavaScript tiêu chuẩn,
cũng như các cơng cụ cho các tính năng bảo mật và giám sát hiệu suất và mạng. Phần lớn
gỡ lỗi JavaScript diễn ra trong Bảng điều khiển và các tab hoạt động Mạng.
• Cơng cụ dành cho nhà phát triển Firefox

Người dùng Firefox trước đây đã dựa vào Fireorms, một tiện ích mở rộng cung cấp cho
người dùng Firefox một bộ công cụ dành cho nhà phát triển cạnh tranh. Các công cụ dành
cho nhà phát triển Firefox có trong các phiên bản Firefox mới nhất đã hấp thụ chức năng
của Fireorms. Điều này đưa trình duyệt Firefox và bộ cơng cụ tích hợp của nó ngang hàng
với Google Chrome.

8


Giao diện công cụ dành cho nhà phát triển firefox
Để tìm Cơng cụ dành cho nhà phát triển Firefox, hãy xem trong menu Cơng cụ trong Web
Developer. Ở đó, bạn sẽ tìm thấy bảng điều khiển JavaScript và nhiều mục hữu ích khác.
• Cơng cụ dành nhà phát triển Safari

Người dùng Safari phải kích hoạt Menu Safari Develop để có quyền truy cập vào các công

cụ dành cho nhà phát triển tích hợp của Safari.
•
•
•

Chuyển đến tab Safari và chọn Tùy chọn.
Chọn nâng cao.
Kích hoạt tùy chọn có tiêu đề Hiển thị menu Phát triển trong thanh menu.

Công cụ Safari Dev
Khi bạn đã làm theo các bước trên, menu Develop sẽ xuất hiện trên thanh công cụ. Trong
menu Phát triển, có các tùy chọn để hiển thị Bảng điều khiển JavaScript, trình gỡ lỗi, trình
giám sát lưu lượng mạng và trình kiểm tra các phần tử trang. Cơng cụ Safari Dev là một
trong những cơng cụ tốt nhất và có thể so sánh với các công cụ gỡ lỗi JavaScript do Chrome
cung cấp. Bạn có thể thấy xu hướng cải tiến giữa các công cụ dành cho nhà phát triển từ tất
cả các trình duyệt, khi chúng ngày càng có khả năng đáp ứng nhu cầu của các nhà phát triển.

9


• Debugger Tool
Nhóm cơng cụ dành cho nhà phát triển Firefox duy trì một cơng cụ độc lập được gọi đơn
giản là “Debugger” mà bạn có thể sử dụng để gỡ lỗi trong Firefox hoặc Chrome và bạn có
thể chuyển đổi giữa chúng nếu cần để đảm bảo rằng ứng dụng của bạn đang hoạt động chính
xác trên cả hai. Nếu bạn sẵn sàng thiết lập ứng dụng nút này chỉ với một vài bước đơn giản,
bạn có thể sử dụng nó thay cho việc sử dụng các cơng cụ trong trình duyệt trong cả hai trình
duyệt và có được trải nghiệm chính xác giống nhau và so sánh giống hệt nhau ở cả hai.

Giao diện cơng cụ Debugger
• Postman để debug request (yêu cầu) và response (phản hồi)

Một số lượng phát triển JavaScript không hề nhỏ xoay quanh việc gửi yêu cầu đến các API
và nhận phản hồi. Các yêu cầu và phản hồi này thường ở định dạng JSON. Ứng dụng của
bạn có thể cần thực hiện các u cầu API vì vơ số lý do, chẳng hạn như tương tác với máy
chủ xác thực, tìm nạp lịch hoặc nguồn cấp tin tức, kiểm tra thời tiết và vô số những lý do
khác.

10


Giao diện Postman

Postman là một trong những công cụ gỡ lỗi JavaScript tốt nhất để gỡ rối các yêu cầu và phản
hồi trong ứng dụng của bạn. Postman cung cấp phần mềm cho Windows, macOS và Linux.
Với Postman, bạn có thể tinh chỉnh u cầu, phân tích phản hời, gỡ lỗi sự cố. Trong phần
mềm, bạn có thể điều chỉnh các giao dịch sạch mà sau đó bạn có thể sao chép trong ứng dụng
của mình.
Ngồi ra, Postman có một tính năng gọi là Bộ sưu tập. Bộ sưu tập cho phép bạn lưu các nhóm
u cầu và phản hời cho ứng dụng của bạn hoặc cho một API. Bạn tiết kiệm thời gian quý
báu khi cộng tác với những người khác hoặc lặp lại các nhiệm vụ thử nghiệm giống nhau.
Khi sử dụng bộ sưu tập Postman, bạn cập nhật bộ sưu tập nếu cần và sau đó sử dụng nó. Điều
này nhanh hơn nhiều so với việc viết ra nhiều lần trong mỗi bài kiểm tra.
• JS Bin
JS Bin là một trong những công cụ gỡ lỗi JavaScript tốt nhất để gỡ lỗi cộng tác JavaScript
của bạn. Nó cho phép bạn kiểm tra và gỡ lỗi các tập lệnh ngay cùng với những người khác.
Bạn có thể chạy JavaScript, xem bảng điều khiển gỡ lỗi và đầu ra của các tập lệnh, thêm thư
viện và phần phụ thuộc, v.v. Các tài khoản chuyên nghiệp cũng có thể sử dụng mã riêng tư
cũng như các lợi ích khác. Một trong những lý do chính mà bạn có thể cân nhắc sử dụng một

11

công cụ như JS Bin là sự đơn giản. Trong JS Bin, bạn có thể kiểm tra chức năng của một tập
con nhỏ JavaScript của mình trong một mơi trường riêng biệt mà khơng cần phải thiết lập
tồn bộ mơi trường cho nó.

Giao diện JS Bin
Khi thử nghiệm trong JS Bin, bạn có thể chắc chắn rằng kết quả của mình khơng bị ảnh hưởng
bởi các tập lệnh hoặc kiểu xung đột từ các phần khác của ứng dụng. Một tính năng chính khác
của JS Bin là kết quả ngay lập tức bạn nhận được từ việc thay đổi JavaScript, HTML hoặc
CSS của mình . Bạn có thể thấy các thay đổi của mình trong thời gian thực. Bạn có thể sao
chép một số mã vào JS Bin và có bản demo hoạt động ngay lập tức. Sau đó, bạn đã sẵn sàng
để gỡ lỗi nó hoặc chia sẻ nó.
• JSON Formattor and Validator
Có thể rất khó phát hiện ra các lỗi cú pháp hoặc các khóa có giá trị khơng chính xác khi nhìn
vào JSON chưa được định dạng. Nếu bạn có một đối tượng JSON cơ đọng hoặc rút gọn, thiếu
các dòng trả về, thụt lề và khoảng trắng, thì việc đọc có thể là một thách thức. Bạn cần có khả
năng quét nhanh đối tượng đó và kiểm tra lỗi trong định dạng hoặc nội dung, để làm điều đó,
bạn sẽ mở rộng đối tượng và định dạng nó, lãng phí thời gian q báu.

12


Giao diện JSON Formatter & Validator
JSON Formatter & Validator làm giảm bớt điểm khó khăn đó, vì vậy chúng tơi đã thêm nó
vào danh sách này với những gì tơi cảm thấy là công cụ gỡ lỗi JavaScript tốt nhất. Postman
tự động định dạng đối tượng và cho phép bạn dễ dàng xác nhận cả cú pháp JSON của nó cũng
như nội dung thực tế. Bạn chỉ cần dán JSON của mình vào và nó xuất ra phiên bản được định
dạng chính xác. Cơng cụ thậm chí sẽ tự động xác nhận cú pháp theo tiêu chuẩn RFC, tùy
thuộc vào việc bạn chọn, nếu có.
2. Sử dụng Console.log()

Sử dụng phương thức console.log() để hiển thị các giá trị trong cửa sổ cơng cụ debug tích
hợp trong trình duyệt web.
Ví dụ chúng ta có đoạn mã:

13


Chạy Chrome và nhấn phím F12 sẽ có kết quả:

Console.log thường được các lập trình viên sử dụng để hiển thị giá trị biến, kiểm tra giá trị
có đúng như mong muốn hay không.
3. Thiết lập các điểm dừng (breakpoints)
Tại mỗi dịng mã, ta có thể thiết lập một breakpoint và JavaScript sẽ ngừng thực thi tại điểm
đó để chúng ta kiểm tra giá trị. Sau khi kiểm tra giá trị xong, chúng ta có thể phục hời lại q
trình thực thi đoạn mã.

Cách thiết lập breakpoint trong Chrome được hướng dẫn chi tiết
tại (các trình duyệt khác có thể tìm hiểu thêm trên mạng).

14


Minh hoạ cách thiết lập điểm dừng đoạn mã trên trong Chrome:
Trong cửa sổ của debugger (sau khi nhấn phím F12) chọn Sources, giao diện lúc này trong như
sau:

Nhấp chuột vào một hàng code nào đó (chẳng hạn như hàng 9) và nhìn xuống
mục Breakpoints sẽ xuất hiện hàng code này, giao diện như sau:

15

Reload lại trang thì vùng bên ngồi cửa sổ debugger xuất hiện thanh chứa nút Resume script
execution (F8) như sau:

Nhấn chuột vào nút này thì chương trình sẽ hoạt động lại bình thường.

16


4. Sử dụng từ khóa “debugger”
Từ khóa debugger dừng việc thực thi JavaScript và gọi hàm gỡ lỗi (nếu có).
Điều này có chức năng tương tự như thiết lập một điểm breakpoint trong trình gỡ lỗi.
Nếu khơng có gỡ lỗi nào khả dụng, câu lệnh gỡ lỗi khơng có hiệu lực.
Với trình gỡ lỗi được bật, mã này sẽ ngừng thực thi trước khi thực thi dòng thứ ba.

Kết quả:

Khi chúng ta đặt từ khố debugger tại vị trí nào đó thì các đoạn mã sau từ khố debugger sẽ
ngừng thực thi khi debugger được bật (F12)

17


5. Debug mã javascript trong ứng dụng website.
5.1. Giới thiệu ứng dụng
- Tạo 1 form với 2 trường nhập dữ liệu: “Chi tiêu” và “Giá tiền”.
- Sử dụng ngôn ngữ Javascript thu thập dữ liệu và hiển thị dữ liệu tương ứng người dùng
nhập vào
- Sử dụng HTML và CSS xây dựng giao diện

Giao diện ứng dụng

Mã nguồn HTML

18


Mã nguồn Javascript
5.2. Phân tích các lỗi javascript trong ứng dụng
• Lỗi 1: Khi click vào nút Thêm thì khơng thực thi mã lệnh
Chuẩn đoán: Sự kiện gọi bị sai cú pháp
• Lỗi 2: Xuất hiện lỗi “document.getElementByid

is not a function”

ở dịng 38

Chuẩn đốn: Sử dụng sai tên function của Javascript

• Lỗi 3: Xuất hiện lỗi “Failed

to excute ‘appendChild’ on ‘Node’: 1 argument

required, but only 0 present

” ở dòng 41

Chuẩn đoán: Sai cú pháp function appenChild, khi sử dụng chưa truyền tham số
5.3. Debug lỗi trong ứng dụng

19


• Lỗi 1: Kiểm tra lại đoạn mã bắt sự kiện khi click vào nút Thêm. Sự kiện hợp lệ
phải sửa lại là click.

• Lỗi 2: Kiểm tra lại code tại dòng 38. Tham khảo tài liệu function của javascript để
sửa lại tên function là getElementById

20


• Lỗi 3: Đối chiếu cú pháp sử dụng hàm appendChild, kiểm tra các tham số truyền
vào. Ở đây cần bổ sung tham số chính là biến li.
Mã ng̀n hồn chỉnh:

21


BÀI 3: DEBUG PHP
1. Các công cụ debug PHP
PHP là một trong những mã ng̀n mở cho phía máy chủ được sử dụng nhiều nhất hiện nay.
Có rất nhiều tên miền được lập bằng cách sử dụng PHP, bao gồm cả những trang web lớn
như Facebook, Digg, WordPress… Có khá nhiều Tool hữu ích được sử dụng để cải thiện
cho cơng việc lập trình khi lỗi.
Trong bài này chúng ta tìm hiểu sơ qua về các Tool Debug được sử dụng nhiều:

• Webgrind

Giao diện cơng cụ webgrind
Webgrind là một front end Xdebug tạo hình trong PHP 5. Nó thực hiện một loạt các tính năng
của kcachegrind, cài đặt trong vài giây và hoạt động trên tất cả các nền tảng. Để tối ưu debug
nhanh chóng, nó sẽ thực hiện yêu cầu được đưa ra.

22


• Xdebug

Xdebug là một trong những extension gỡ lỗi PHP phổ biến nhất. Nó cung cấp nhiều dữ liệu
hữu ích nhằm giúp nhanh chóng tìm thấy các lỗi (bug) trong mã nguồn . Các plug của Xdebug
phù hợp với nhiều các ứng dụng PHP phổ biến nhất như PHPEclipse và phpDesigner.\
• Gubed PHP Debugger

Giao diện cơng cụ PHP Debugger

23


Giống như trong tên, Gubed PHP Debugger là một công cụ gỡ lỗi PHP dùng trong tìm kiếm
và truy lùng các lỗi logic.
• DBG

DBG là một trình gỡ rối PHP mạnh mẽ và phổ biến dùng trong việc debug PHP local và remote.
Nó tích hợp với một lượng lớn các IDE PHP và có thể dễ dàng được sử dụng thơng qua dịng
lệnh.
• PHP Debug

PHP_Debug là một dự án mã ng̀n mở cung cấp thơng tin hữu ích về mã PHP có thể được sử

dụng để gỡ lỗi. Nó có thể cung cấp thời gian xử lý của PHP và SQL, kiểm tra hiệu suất của các

24


khối mã cụ thể và thu nhận tình trạng đi xuống của các biến dưới dạng đồ họa, việc này rất tốt
và cần nhiều cho kết quả trực quan hơn so với kết quả được cung cấp bởi print_r () hoặc
var_dump () .
• PHP Dyn

PHP_Dyn là một cơng cụ gỡ lỗi PHP dành cho mã ng̀n mở. Có thể theo dõi quá trình thực
hiện debug và thu nhận kết quả của các đối số và trả về giá trị cho các chức năng.

25