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 BÀI 1: TỔNG QUAN VỀ DEBUG • Khái niệm chung bug debug Việc lập trình website ln gắn liền với debug fixbug hồn thành việc thiết kế website hồn chỉnh Debug kĩ tảng lập trình viên Mục đích 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õ việc thực thi chương trình Một lập trình viên khơng có khả debug hiệu giống bị mù Trên thực lập trình viên dùng nhiều thời gian để gỡ lỗi việc code mới, tạo chức Fix bug trình sau debug, sau tìm lỗi chương trình tiến hành sửa lỗi fixbug Hai kỹ thuật debug fixbug thiết kế website quan trọng với lập trình viên • Bug gì? - Bug tiếng anh bọ, bọ ám lỗi xảy logic, hay vấn đề gây việc làm cho ứng dụng khơng thực thi thực thi sai Bug tiềm ẩn nơi, ta lường trước tình xảy mà cố gắng làm giảm đến mức thấp tùy vào khả ta - thời điểm phát triển bảo trì ứng dụng - Cụ thể website, bug lỗi mặt giao diện, tính hoạt động sai khơng mong muốn lập trình viên Bug gây ảnh hưởng xấu đến trang web • Debug gì? - Debug trình tìm kiếm lỗi hay nguyên nhân gây lỗi (bug đâu) để có hướng sửa lỗi (fix bug) Việc kiểm sốt lỗi nhiều dịng code việc khơng đơn giản - với người lập trình viên chưa có nhiều kinh nghiệm Chuyện xảy lỗi hàng nghìn dịng lệnh chuyện bình thường người làm lập trình Chương trình chạy khơng ý người lập trình, chạy sai chức quy định, gây cho chương trình bị đánh giá chất lượng Vậy bị lỗi lập trình viên phải debug để fix lỗi giúp cho chương trình (program) chạy tốt, u cầu, mong muốn - Mục đích Debug khơng để loại bỏ lỗi (error) khỏi chương trình mà quan trọng cịn để giúp lập trình viên hiểu rõ thực thi chương trình Debug giúp lập trình viên cải thiện trình độ • Các phương pháp debug Kĩ debug fixbug thiết kế website phần lớn đến từ kinh nghiệm, kinh nghiệm thân, chia sẻ từ người khác Hoặc loại khiếu bẩm sinh, khiếu sử lý lỗi, tức sinh đã có rời, thời gian sử lý bug thường nhanh khơng gặp chút khó khăn Tuy nhiên, hai đường, đến từ kinh nghiệm rèn luyện, hay từ bẩm sinh nữa, có đặc điểm chung ❖ Debugging Tool – dùng công cụ để Debug – phương pháp Debug sâu vào source code Thường gọi Debugging Tool Debugger Sử dụng công cụ để debug ❖ Printlining: đơn giản bạn thêm vào source code bạn dòng lệnh để in thông tin mà bạn cần theo dõi trình thực thi Debug sử dụng phương pháp printlining • Logging: tạo biểu mẫu để ghi (log) lại thơng tin sau chương trình thực thi Phân tích ngun nhân lỗi dựa thơng tin Biểu mẫu ghi lại thông tin thực thi Các cơng cụ debug Để Debug hiệu ngồi trình độ lập trình viên bạn cần đến hỗ trợ công cụ chuyên nghiệp Dưới số cơng cụ hữu ích: • Cơng cụ Debugging Tool Cơng cụ Debugging Tool hay cịn gọi Debugger, dùng để hỗ trợ Debug chuyên sâu Nó giúp lập trình viên sâu vào source code Thông thường Debugger thường sử dụng phần mềm GNU Debugger, Microsoft Visual Studio Debugger Chúng thiết kế dựa theo tảng hệ thống nhúng gọi Embedded System, Tuy nhiên thiết kế nhúng khơng mang mục đích chính, dùng làm platform riêng với mục đích đơn lẻ lại địi hỏi yếu tố đặc thù • Cơng cụ Print Lining Công cụ sử dụng phổ biến cách dùng đơn giản Bạn việc thêm Print Lining vào dòng lệnh trình thực thi thơng tin Ví dụ bạn sử dụng cơng cụ dùng Arduino IDE khơng xuất Debugger Trong cách Debug có hiệu cao phù hợp với công cụ Serial.print • Cơng cụ Logging Cơng cụ Logging có khả tạo biểu mẫu Nó dùng để lưu lại thông tin sau chương trình hoạt động Nhờ có cơng cụ này, lập trình viên tìm, phân tích ngun nhân gây lỗi để từ chọn phương pháp khắc phục phù hợp Là lập trình viên việc nắm rõ Debug cách tìm, khắc phục điều cần thiết Tuy nhiên, bạn “tay mơ” nên tìm đến chuyên gia để hỗ trợ hướng dẫn cách cụ thể BÀI 2: DEBUG JAVASCRIPT Các công cụ debug JavaScript • Cơng cụ dành cho nhà phát triển 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 cách nhanh chóng để gỡ lỗi mã JavaScript bạn Bạn mở Cơng cụ Dev cho tab Bảng điều khiển cách sử dụng 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 công cụ tốt ngành nhiều nhà phát triển tin tưởng công cụ cho nhu cầu gỡ lỗi hàng ngày 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 cụ cho tính bảo mật giám sát hiệu suất mạng Phần lớn gỡ lỗi JavaScript diễn Bảng điều khiển 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 đã dựa vào Fireorms, tiện ích mở rộng cung cấp cho người dùng Firefox 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ó phiên Firefox đã hấp thụ chức Fireorms Điều đưa trình duyệt Firefox cơng cụ tích hợp ngang hàng với Google Chrome 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 menu Công cụ Web Developer Ở đó, bạn tìm thấy bảng điều khiển JavaScript 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ông cụ dành cho nhà phát triển tích hợp Safari • • • Chuyển đến tab Safari 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 menu Công cụ Safari Dev Khi bạn đã làm theo bước trên, menu Develop xuất cơng cụ Trong menu Phát triển, 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 trình kiểm tra phần tử trang Cơng cụ Safari Dev công cụ tốt so sánh với cơng cụ gỡ lỗi JavaScript Chrome cung cấp Bạn thấy xu hướng cải tiến công cụ dành cho nhà phát triển từ tất trình duyệt, chúng ngày có khả đáp ứng nhu cầu nhà phát triển • Debugger Tool Nhóm cơng cụ dành cho nhà phát triển Firefox trì công cụ độc lập gọi đơn giản “Debugger” mà bạn sử dụng để gỡ lỗi Firefox Chrome bạn chuyển đổi chúng cần để đảm bảo ứng dụng bạn hoạt động xác hai Nếu bạn sẵn sàng thiết lập ứng dụng nút với vài bước đơn giản, bạn sử dụng thay cho việc sử dụng cơng cụ trình duyệt hai trình duyệt có trải nghiệm xác giống so sánh giống hệt hai Giao diện công cụ Debugger • Postman để debug request (yêu cầu) response (phản hồi) Một số lượng phát triển JavaScript không nhỏ xoay quanh việc gửi yêu cầu đến API nhận phản hồi Các yêu cầu phản hồi thường định dạng JSON Ứng dụng bạn cần thực u cầu API vô số lý do, chẳng hạn tương tác với máy chủ xác thực, tìm nạp lịch ng̀n cấp tin tức, kiểm tra thời tiết vô số lý khác 10 BÀI 3: DEBUG PHP Các công cụ debug PHP PHP mã ng̀n mở cho phía máy chủ sử dụng nhiều Có nhiều tên miền lập cách sử dụng PHP, bao gồm trang web lớn Facebook, Digg, WordPress… Có nhiều Tool hữu ích sử dụng để cải thiện cho cơng việc lập trình lỗi Trong tìm hiểu sơ qua Tool Debug sử dụng nhiều: • Webgrind Giao diện cơng cụ webgrind Webgrind front end Xdebug tạo hình PHP Nó thực loạt tính kcachegrind, cài đặt vài giây hoạt động tất tảng Để tối ưu debug nhanh chóng, thực yêu cầu đưa 22 • Xdebug Xdebug extension gỡ lỗi PHP phổ biến Nó cung cấp nhiều liệu hữu ích nhằm giúp nhanh chóng tìm thấy lỗi (bug) mã nguồn Các plug Xdebug phù hợp với nhiều ứng dụng PHP phổ biến PHPEclipse phpDesigner.\ • Gubed PHP Debugger Giao diện công cụ PHP Debugger 23 Giống tên, Gubed PHP Debugger công cụ gỡ lỗi PHP dùng tìm kiếm truy lùng lỗi logic • DBG DBG trình gỡ rối PHP mạnh mẽ phổ biến dùng việc debug PHP local remote Nó tích hợp với lượng lớn IDE PHP dễ dàng sử dụng thơng qua dịng lệnh • PHP Debug PHP_Debug dự án mã ng̀n mở cung cấp thơng tin hữu ích mã PHP sử dụng để gỡ lỗi Nó cung cấp thời gian xử lý PHP SQL, kiểm tra hiệu suất 24 khối mã cụ thể thu nhận tình trạng xuống biến dạng đồ họa, việc tốt cần nhiều cho kết trực quan so với kết cung cấp print_r () var_dump () • PHP Dyn PHP_Dyn công cụ gỡ lỗi PHP dành cho mã ng̀n mở Có thể theo dõi q trình thực debug thu nhận kết đối số trả giá trị cho chức 25 • MacGDBp MacGDBp ứng dụng gỡ rối PHP trực tiếp cho Mac OS Nó có tất tính bạn mong muốn từ trình gỡ lỗi đầy đủ tính năng, khả truy cập code thiết lập điểm ngắt/ điểm dừng (breakpoints) Sử dụng print() Lệnh Print PHP lệnh ngơn ngữ lập trình PHP, khơng phải hàm, 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 lệnh echo, ln trả giá trị Cú pháp lệnh Print PHP: int print(string $arg) Lệnh print PHP sử dụng để in chuỗi, chuỗi nhiều dòng, biến, mảng, v.v ❖ PHP Print: In chuỗi hình: 26 Kết quả: Hello PHP print! ❖ PHP Print: In chuỗi nhiều dịng hình: File: print2.php Kết quả: Hello PHP Print! nhiều dòng văn in câu lệnh print PHP ❖ PHP Print: In ký tự đặc biệt Để in ký tự đặc biệt PHP bạn nên sử dụng dấu gạch chéo ngược (\), ví dụ: File: print3.php Kết quả: In dau ngoac kep "ngoac kep" PHP bang lenh Print ❖ PHP Print: in giá trị biến File: print4.php 27 Kết quả: Message: Hello PHP Print! Sử dụng var_dump() Hàm var_dump() PHP in thông tin biến gồm kiểu liệu biến giá trị Cú pháp: var_dump( $var); Trong đó: $var biến cần lấy thơng tin Ví dụ: Kết 28 Sử dụng die() Hàm die() in thông báo kết thúc tập chương trình dịng Cú pháp: die(message) Trong đó: message thơng báo số trạng thái(404, 401,…) cần in trước kết thúc câu lệnh Số trạng thái không hiển thị, sử dụng làm trạng thái Ví dụ: Sử dụng isset() Hàm isset() dùng để kiểm tra biến đã khởi tạo nhớ máy tính hay chưa, đã khởi tạo (tờn tại) trả TRUE ngược lại trả FALSE Ví dụ: Kiểm tra biến $domain có tờn 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 trình biên dịch code có sử dụng biến khơng tờn trình biên dịch ngưng xử lý thơng báo lỗi ngay, thơng thường trường hợp mà ta khơng chắn biến ln tờn trước sử dụng hãy kiểm tra Ví dụ: Lấy thơng tin đăng ký từ form Thông thường lấy thông tin từ form nên kiểm tra có tờn không rồi lấy giá trị chúng, không người dùng sử dụng firebug đổi số name thẻ input chương trình 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 URL dùng để phân trang Trong thuật toán phân trang lấy page URL để xác định record hiển thị cho trang Chính page nằm URL nên nguy hiểm lấy mà khơng kiểm tra tờn hay khơng người dùng cần bỏ page=x chương trình bị lỗi 30 $current_page = isset($_GET['page']) ? $_GET['page'] : '1'; Ví dụ: Thực nối chuỗi biến $domain chưa chắn tồn $website = 'codienhanoi.edu.vn’; if ($website != ''codienhanoi.edu.vn){ $slogan = 'Đây khơng phải website'codienhanoi.edu.vn; } $slogan = 'vui lịng ghi rõ nguồn public nội dung website khác'; Rõ ràng đoạn code chạy bị lỗi biến $slogan khơng tờn câu lệnh bên mệnh đề if không chạy Trên ví dụ thơng thường hay xảy thực tế nên nhiều trường hợp nên sử dụng hàm isset() php Debug mã PHP ứng dụng website 6.1 Giới thiệu ứng dụng - Trang web thực chuyển đổi mã XML sang dạng JSON - Sử dụng kiến thức HTML & CSS để xây dựng giao diện - Sử dụng kiến thức form truyền liệu lấy liệu PHP - Nhập mã XML vào Textarea bên trái - Bấm phím “Chuyển đổi” để thực chức - Dữ liệu JSON chuyển đổi hiển thị Textarea bên phải 31 Giao diện: Code: 6.2 Phân tích lỗi PHP ứng dụng • Lỗi 1: Khi chạy chương trình xuất lỗi dòng file index.php “Call to a member function getName() on bool” 32 Chuẩn đoán: $_POST[‘text-left’] bị rỗng khơng thể đọc function getName() để lấy name • Lỗi 2: Nhập đoạn mã XMl vào chương trình bấm “Chuyển đổi” để thực thi, xuất lỗi “Call to undefined function simplexml_load_strings() dòng file index.php Kết quả: Chuẩn đoán: Giá trị tham số truyển vào rỗng 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 xuất cảnh báo json_decode expects parameter to string dòng file index.php Kết quả: Chuẩn đoán: tham số thứ function json_decode dùng function sai mục đích 33 6.3 Debug lỗi ứng dụng • Lỗi 1: Kiểm tra tờn $_POST[‘submit’] thực thi chương trình khơng kiểm tra đầu vào chương trình khơng thể tìm thấy liệu $_POST[‘text-left’], kéo theo khơng thể đọc function simple_load_string() • Lỗi 2: Kiểm tra lại tả tên function hay khơng Trong số trình soạn thảo có gợi ý nên gõ code cần ý sử dụng • Lỗi 3: Kiểm tra function đã dùng mục địch hay chưa json_decode: Dùng để chuyển liệu từ dạng JSON sang dạng mảng json_encode: Dùng để chuyển liệu từ dạng mảng sang dạng JSON từ dùng function mục đích với yêu cầu tốn 34 Mã ng̀n hồ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 vscode 36 ... VỀ DEBUG • Khái niệm chung bug debug Việc lập trình website ln gắn liền với debug fixbug hồn thành việc thiết kế website hoàn chỉnh Debug kĩ tảng lập trình viên Mục đích debug để loại bỏ lỗi. .. Fix bug trình sau debug, sau tìm lỗi chương trình tiến hành sửa lỗi fixbug Hai kỹ thuật debug fixbug thiết kế website quan trọng với lập trình viên • Bug gì? - Bug tiếng anh bọ, bọ ám lỗi xảy... chương trình hoạt động Nhờ có cơng cụ này, lập trình viên tìm, phân tích ngun nhân gây lỗi để từ chọn phương pháp khắc phục phù hợp Là lập trình viên việc nắm rõ Debug cách tìm, khắc phục điều