1 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 2 3 BÀI 1 TỔNG QUAN VỀ DEBUG • Khái niệm chun[.]
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 ... 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