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

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 yê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 yê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. 
Ngoà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 
yê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 
toà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 quý 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 quá 
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 https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-
breakpoints?hl=en (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 ngoà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ừ khoá debugger tại vị trí nào đó thì các đoạn mã sau từ khoá 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 đoá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ã nguồn hoà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ã nguồ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ã nguồ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ã nguồ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 
• MacGDBp 
MacGDBp là một ứng dụng gỡ rối PHP trực tiếp cho Mac OS. Nó có tất cả các tính năng bạn 
mong muốn từ một trình gỡ lỗi đầy đủ tính năng, như khả năng truy cập code và thiết lập các 
điểm ngắt/ điểm dừng (breakpoints). 
2. Sử dụng print() 
 Lệnh Print trong PHP là một lệnh của ngôn ngữ lập trình PHP, không phải là một hàm, vì vậy 
 bạn không cần sử dụng dấu ngoặc đơn với danh sách đối số. Không giống như lệnh echo, nó 
 luôn trả về giá trị là 1. 
 Cú pháp của lệnh Print trong PHP: 
 int print(string $arg) 
 Lệnh print trong PHP có thể được sử dụng để in chuỗi, chuỗi nhiều dòng, biến, mảng, v.v. 
 ❖ PHP Print: In chuỗi ra màn hình: 
<?php 
 print "Hello PHP print!"; 
?> 
 26 
 Kết quả: 
Hello PHP print! 
 ❖ PHP Print: In chuỗi nhiều dòng ra màn hình: 
 File: print2.php 
 <?php 
 print "Hello PHP Print! 
 đây là nhiều dòng 
 văn bản được in bởi 
 câu lệnh print PHP"; 
 ?> 
 Kết quả: 
Hello PHP Print! đây là nhiều dòng văn bản được in bởi câu lệnh print PHP 
 ❖ PHP Print: In ký tự đặc biệt 
 Để in ký tự đặc biệt trong PHP bạn nên sử dụng dấu gạch chéo ngược (\), ví dụ: 
 File: print3.php 
 <?php 
 print "In dau ngoac kep \"ngoac kep\" trong PHP bang lenh 
 Print."; 
 ?> 
 Kết quả: 
In dau ngoac kep "ngoac kep" trong PHP bang lenh Print. 
 ❖ PHP Print: in giá trị của biến 
 File: print4.php 
 27 
 <?php 
 $msg="Hello PHP Print!"; 
 print "Message: $msg"; 
 ?> 
 Kết quả: 
Message: Hello PHP Print! 
3. Sử dụng var_dump() 
Hàm var_dump() trong PHP__ sẽ in ra thông tin của biến gồm kiểu dữ liệu của biến và giá trị. 
Cú pháp: 
 var_dump( $var); 
 Trong đó: $var là biến cần lấy thông tin. 
Ví dụ: 
Kết quả 
 28 
4. Sử dụng die() 
Hàm die() in một thông báo và kết thúc tập chương trình tại dòng hiện tại. 
Cú pháp: 
 die(message) 
Trong đó: message là thông báo hoặc số trạng thái(404, 401,) cần in trước khi kết thúc câu 
lệnh. Số trạng thái sẽ không hiển thị, chỉ được sử dụng làm trạng thái thoát. 
Ví dụ: 
5. Sử dụng isset() 
Hàm isset() được dùng để kiểm tra một biến nào đó đã được khởi tạo trong bộ nhớ của máy 
tính hay chưa, nếu nó đã khởi tạo (tồn tại) thì sẽ trả về TRUE và ngược lại sẽ trả về FALSE. 
Ví dụ: Kiểm tra biến $domain có tồn tại hay không 
 29 
 if (isset($domain)){ 
 echo 'Biến domain đã tồn tại'; 
 } 
 else{ 
 echo 'Biến domain chưa tồn tại'; 
 } 
Nếu trong quá trình biên dịch nếu trong code có sử dụng một biến không tồn tại thì trình biên 
dịch sẽ ngưng xử lý và thông báo lỗi ngay, chính vì vậy thông thường những trường hợp mà 
ta không chắc chắn là biến đó luôn tồn tại thì trước khi sử dụng hãy kiểm tra nó. 
Ví dụ: Lấy thông tin đăng ký từ form 
Thông thường khi lấy thông tin từ một form thì chúng ta nên kiểm tra nó có tồn tại không rồi 
mới lấy giá trị của chúng, nếu không người dùng sẽ sử dụng firebug đổi một số name của các 
thẻ input thì chương trình sẽ báo lỗi. 
 if (isset($_POST['submit'])) 
 { 
 $fullname = isset($_POST['fullname']) ? $_POST['fullname'] : 
 ''; 
 $address = isset($_POST['address']) ? $_POST['address'] : ''; 
 $email = isset($_POST['email']) ? $_POST['email'] : ''; 
 $phone = isset($_POST['phone']) ? $_POST['phone'] : ''; 
 } 
Ví dụ: Lấy trang hiện tại trên URL dùng để phân trang 
Trong thuật toán phân trang chúng ta lấy page trên URL để xác định record hiển thị cho trang 
đó. Chính vì page nằm trên URL nên rất nguy hiểm nếu như chúng ta lấy mà không kiểm tra 
nó tồn tại hay không vì nếu người dùng chỉ cần bỏ cái page=x đó đi thì chương trình sẽ bị lỗi 
ngay. 
 30 
 $current_page = isset($_GET['page']) ? $_GET['page'] : '1'; 
Ví dụ: Thực hiện nối chuỗi trong khi biến $domain chưa chắc chắn là tồn tại 
 $website = 'codienhanoi.edu.vn’; 
 if ($website != ''codienhanoi.edu.vn){ 
 $slogan = 'Đây không phải là website'codienhanoi.edu.vn; 
 } 
 $slogan .= 'vui lòng ghi rõ nguồn khi public nội dung này ở 
 website khác'; 
Rõ ràng đoạn code này chạy sẽ bị lỗi ngay bởi vì biến $slogan sẽ không tồn tại vì câu lệnh 
bên trong mệnh đề if không được chạy. 
Trên là những ví dụ thông thường hay xảy ra trong thực tế nên vẫn còn khá nhiều trường hợp 
nên sử dụng hàm isset() trong php. 
6. Debug mã PHP trong ứng dụng website. 
 6.1 Giới thiệu ứng dụng 
 - Trang web thực hiện chuyển đổi mã XML sang dạng JSON 
 - Sử dụng những kiến thức về HTML & CSS để xây dựng giao diện 
 - Sử dụng các kiến thức cơ bản về form truyền dữ liệu và lấy dữ liệu trong PHP 
 - Nhập mã XML vào Textarea bên trái 
 - Bấm phím “Chuyển đổi” để thực hiện chức năng 
 - Dữ liệu JSON sẽ được chuyển đổi và hiển thị Textarea bên phải 
 31 
 Giao diện: 
Code: 
6.2 Phân tích các lỗi PHP trong ứng dụng 
 • Lỗi 1: Khi chạy chương trình xuất hiện lỗi ở dòng 3 trong file index.php “Call to a 
 member function getName() on bool” 
 32 
 Chuẩn đoán: $_POST[‘text-left’] đang bị rỗng và nó không thể đọc được function 
 getName() để lấy ra name 
 • Lỗi 2: Nhập 1 đoạn mã XMl vào chương trình bấm “Chuyển đổi” để thực thi, xuất hiện 
 lỗi “Call to undefined function simplexml_load_strings() tại dòng 4 của file index.php 
Kết quả: 
Chuẩn đoán: Giá trị tham số truyển vào đang rỗng hoặc Sai tên function 
simplexml_load_strings() 
 • Lỗi 3: Tiếp tục chạy chương trình với đoạn XML trên xuất hiện cảnh báo json_decode 
 expects parameter 1 to string tại dòng 7 trong file index.php 
Kết quả: 
Chuẩn đoán: tham số thứ nhất của function json_decode hoặc dùng function sai mục đích 
 33 
6.3 Debug lỗi trong ứng dụng 
 • Lỗi 1: Kiểm tra tồn tại $_POST[‘submit’] thì mới thực thi chương trình vì nếu 
 không kiểm tra thì đầu vào chương trình thì chúng ta không thể tìm thấy dữ liệu 
 của $_POST[‘text-left’], kéo theo không thể đọc function simple_load_string() 
 • Lỗi 2: Kiểm tra lại chính tả tên function đúng hay không. Trong một số trình soạn 
 thảo có gợi ý nên khi gõ code cần chú ý hơn và sử dụng đúng 
 • Lỗi 3: Kiểm tra function đã dùng đúng mục địch hay chưa 
 json_decode: Dùng để chuyển dữ liệu từ dạng JSON sang dạng mảng 
 json_encode: Dùng để chuyển dữ liệu từ dạng mảng sang dạng JSON 
 từ đó chúng ta sẽ dùng function đúng mục đích với yêu cầu bài toán 
 34 
Mã nguồn hoàn chỉnh: 
 35 
 TÀI LIỆU THAM KHẢO 
[1]. https://www.w3schools.com/Js/js_debugging.asp 
Debug JavaScript 
[2]. https://fstackcoder.com/visual-code-voi-php-su-dung-xdebug-php-debug-cho-vscode/ 
Sử dụng xdebug, php debug trong vscode 
 36