Kinh nghiệm lập trình website mã nguồn mở PHP

Debug trong Magento 2

Giới thiệu

Ý nghĩa của việc debug trong Magento

Làm việc với 1 nền tảng phức tạp như Magento, thời gian cho việc debug, sửa lỗi nhiều hơn là bạn viết code mới. Chắc chắn 1 điều là phải nắm rõ được cơ chế hoạt động của 1 chức năng thì bạn mới có thể tùy biến và mở rộng nó.

Một trong những kỹ năng tối thiểu cần phải có của 1 lập trình viên kinh nghiệm là khả năng debug, fix bug nhanh gọn. Nếu bạn chưa biết cách debug thì bạn nên đổi qua nghề thầy bói là vừa (nhớ truyện Thầy bói xem voi chứ?)

các kỹ năng cần thiết để trau dồi để bạn trở thành một lập trình viên kinh nghiệm

Đi tìm người để hỏi cách sửa bug
– Hiểu error message
– Debug, fix bug
– Đọc source code
– Tổ chức ứng dụng
– Viết tài liệu kỹ thuật

Các khái niệm căn bản trong việc debug

Tuy mỗi ngôn ngữ, nền tảng đều có công cụ lập trình khác nhau, nhưng các thao tác debug vẫn không có gì khác biệt: step over, step into, step out, breakpoints, watch variable

Khi debug gặp khó khăn như xuất hiện không thường xuyên, trên môi trường production… Thì sử dụng debug kết hợp ghi log song kiếm hợp bích

Uầy, khoan đã! Ông đang nói cái what giò heo gì thế? Tui chỉ biết echo, print giá trị các biến ra màn hình thôi . Thực ra đây cũng là một kiểu debug thô sơ, đơn giản nhất. Giữ gìn phát huy cách debug truyền thống này chắc sẽ được UNESCO công nhận, vài trường hợp ta chỉ cần Make it simple là được nhưng vẫn phải biết cách debug bằng công cụ chuyên nghiệp.

Debug code PHP bằng Xdebug và PhpStorm

Công cụ lý tưởng để code Magento 1 và 2 là PhpStorm, tất nhiên NetBeans cũng không tệ, Sublime Text hả? Thôi nghỉ phẻ, anh tưởng anh là ai trong cái hệ mặt trời này?

Cách cài đặt Xdebug vào PhpStorm khá đơn giản, bạn chỉ cần 3 bước sau:

– Cài Xdebug cho PHP, có hướng dẫn từng bước tại đây https://xdebug.org/wizard.php
– Chỉnh PhpStorm tích hợp với Xdebug https://www.jetbrains.com/help/phpstorm/configuring-xdebug.html
– Nếu 2 bước trên chưa thành công thì vác mông đi hỏi thằng đồng nghiệp

Test thử pha first debug trong Magento 2 của bạn
Debug trong Magento 2

Ta sẽ debug cái luồng login, xem khi ta bấm Sign In thì chuyện gì sẽ xảy ra (hy vọng không tự dưng xóa bay 1 nữa customer trong database)

Nào, nhớ lý thuyết Magento 2 chương Controller chứ? Theo request flow thì cái controller xử lý cho cái route /customer/account/login/ sẽ là: module Customer, controller folder Account, action class Login: trên máy của mình là vendor/magento/module-customer/Controller/Account/Login.php

Đây rồi! Nhưng mà khoan, cái controller này sẽ xử lý để hiện ra cái form login trên trang này thôi, còn cái class xử lý lúc submit form là cái khác, thấy cái LoginPost.php chung thư mục không, nghi nghi rồi đó. Quả nhiên khi xem HTML thì form action tới loginPost, nó chứ còn ai trồng khoai đất này nữa!

Debug trong Magento 2

Ta sẽ đặt 1 cái breakpoint màu đỏ trong cái hàm execute() – kiến thức controller basic

Tuy mình đang diễn tả thao tác debug đơn thuần, nhưng mình vẫn muốn chia sẻ 1 việc cần làm đầu tiên trước khi bấm nút run debug. Không phải là cầu Chúa hay niệm Phật gì cả, mà đầu tiên bạn cần làm là đọc source code 1 lượt hết cái hàm chuẩn bị debug, vì đôi khi cái hàm nó đơn giản quá chừng, chỉ có gán cái biến hay xuất cái chữ gì ra thôi, if else vài cái, vậy thì debug làm gì cho mất công, đọc không cũng đủ hiểu nó làm gì rồi. Nhớ nhé, đọc code trước khi debug.

Đọc code hàm Login Post

– Kiểm tra customer có login hay chưa
– – Nếu login rồi thì đi qua trang my account
– Kiểm tra action form post
– – Validate username, password
– – Truyền username, password vào hàm authentication
– – set giá trị session
– – chuyển hướng customer login success vào 1 trang nào đó dựa trên cấu hình trong admin, mặc định là my account

Ok, cũng tường minh trong sáng đấy, ta run debug thôi

Khi bấm nút Sign In, debugger kích hoạt đúng breakpoint ta cần, các theo tao tiếp theo của mình là:

– step over (F8) tới dòng 184 – gọi hàm authenticate, tại đây ta có thể quan sát biến login là 1 mảng gồm username và password plain text
– step into (F7) vào trong hàm authenticate , lúc này ta sẽ chạy vào hàm authenticate để xem nó làm gì với username và password quý giá của người dùng.

Đọc code hàm authenticate

– Tìm trong hệ thống customer theo username, nếu không có thằng username này trong dữ liệu thì báo luôn không tồn tại customer và đá ra ngoài cho nhanh, khỏi làm gì mất công (đang login mà)
– Nếu có customer này thì kiểm tra: có đang bị khóa không? Tiếp tục gọi hàm authenticate khác

Tiếp tục debug vào hàm authenticate

– step into (F7) vào hàm retrieveSecureData, hàm này sẽ nhận password đã mã hóa của customer, theo cơ chế mã hóa hiện nay thì password sẽ được mã hóa trước khi lưu trữ, đây là thuật toán 1 chiều, không thể chuyển từ 1 đoạn mã hóa thành text ban đầu được nên hacker có lấy được cũng bó tay, do vậy muốn xác thực chỉ còn cách chuyển từ text sang đoạn mã hóa và so sánh cái đó với cái đang lưu trong cơ sở dữ liệu.
– step into (F7) vào hàm validateHash xem cơ chế mã hóa của Magento 2
– – step into explodePasswordHash, hash trong Magento là 1 đoạn chuỗi dạng 775145f3da8a5f871d7cfc515b064a65083951145ece815b11b435f96f492a06:jMnTwQLAaWmDbmtBsmbjdq4Z0Np6vFcq:1 , ta để ý gồm 3 phần phân cách bởi dấu hai chấm
– – – 775145f3da8a5f871d7cfc515b064a65083951145ece815b11b435f96f492a06
– – – jMnTwQLAaWmDbmtBsmbjdq4Z0Np6vFcq
– – – 1
– – step into hash, trong này ta sẽ hiểu ý nghĩa của 3 đoạn chuỗi trên gồm:
– – – chuỗi sau khi gọi hàm hash của PHP, truyền vào tên thuật toán mã hóa sha256, chuỗi gồm PASSWORD_SALT nối với password plain text, echo hash('sha256', 'jMnTwQLAaWmDbmtBsmbjdq4Z0Np6vFcqroni_cost3@example.com');
– – – PASSWORD_SALT: 1 chuỗi 32 ký tự sinh ngẫu nhiên
– – – version hash, 1 chính là sha256, thuật toán mã hóa
– – vậy là dựa vào password đã mã hóa trong hệ thống, ta sẽ lấy được đoạn SALT và thuật toán sha256, sau đó ta sẽ mã hóa password plain text theo y chang cơ chế, bùm! Ta đã có trong tay 2 đống bùi nhùi dùng cho việc so sánh

Công việc còn lại cũng khá đơn giản, kết quả sau khi debug xong hàm login này là biết được cơ chế mã hóa customer của magento 2, từ nay các em gái QC la làng sao tài khoản em không login được thì bạn có thể vào database, lấy password hash ra, lấy đoạn salt, sau đó dùng password gốc nối với salt, gọi hàm hash php dùng sha256, so sánh xem 2 đoạn hash giống nhau hay chưa, sau đó kết luận em sai pass rồi, để anh reset pass cho, rồi bạn update lại đoạn hash mới vào dữ liệu, oai như cóc!

Debug code JavasScript bằng Chrome DevTools

Trong Magento 2, rất nhiều xử lý thực thi trên tầng JavaScript, cụ thể là KnockoutJS, kỹ năng debug JS sẽ giúp bạn rất nhiều không những trong Magento 2 mà còn rất nhiều nền tảng khác (giờ website nào mà không dùng JS chứ)

Dùng Chrome, chỉ cần bấm F12 là ta đã có 1 bộ các công cụ làm việc hoàn hảo, không cần cài đặt gì thêm.

Đây là giao diện DevTools, quá quen thuộc với dân lập trình web rồi, với debug thì ta chú ý tới tab Sources

Okay, bây giờ ta sẽ tiến hành debug chức năng checkout shipping trong Magento 2, khi người dùng tạo mới 1 shipping address.

Bước đầu tiên

Cầu nguyện
– Đăng nhập
– Mua 1 món hàng
– Qua trang checkout

Đây là trang ta sẽ debug

– F12, chọn tab Source, Ctrl+P gõ vào shipping.js (frontend/Magento/luma/en_US/Magento_Checkout/js/view/shipping.js)
– khoan khoan, sao mà mình biết file này? Để hiểu chính xác file js nào sẽ chạy trên trang nào cần 1 lượng kiến thức nhất định, ở đây là luồng checkout mà mình muốn đề cập tới 1 bài viết chuyên biệt khác (gợi ý cho bạn nào quá tò mò là dựa vào layout để biết file js nào sẽ được render nhé)
– Đoán mò cũng là 1 cách hay vì Magento 2 đã viết code rất sáng sủa, ta đang checkout vậy thì module là Magento_Checkout, ta ở trang shipping vậy thì trong view/shipping.js chứ còn gì nữa
– Sau khi mở file shipping.js trong tab Sources, ra gắn 1 cái breakpoint ngay mép ghi số dòng, F5 là browser đã vào chế độ debugging

3 cột bên dưới

– cột 1 bỏ qua
– cột 2 breakpoint và line debug
– cột 3 có các nút step into, over… Watch giá trị biến, Call Stack xem code cha, ông nào gọi tới nó (cả 1 gia phả)

Tiến hành debug shipping.js

– Gắn cục debug ngay hàm initialize() – bước này quan trọng, sai 1 ly đi 1 dặm ngay, debug chạy vào file thư viện là đi hoài không thấy đường ra
– F5 run debug, tại sao lại là hàm initialize() mà không phải hàm khác? Ta sẽ xem Call Stack để xem hàm nào gọi tới nó, ngay dòng Call Stack số 3 UiClass, bạn sẽ thấy có đoạn gọi obj.initialize, đây là thư viện nằm trong Magento_Ui, nó sẽ gọi hàm này như là 1 contructor
– step over (F10), bạn sẽ thấy hàm này đơn thuần đăng ký 1 step vào stepNavigator, kiểm tra có address mới hay không? Lấy thông tin address trong checkoutData.getShippingAddressFromData(), đây là thông tin địa chỉ address book default của customer
– xem các hàm còn lại: navidate qua step khác, showFormPopUp hiện form khi customer Add new address, saveNewAddress đây sẽ là hàm ta cần debug
– Gắn cục debug ngày hàm saveNewAddress()
– add new address, điền thông tin và save
– step over (F10) tới hàm createShippingAddress()
– step into (F11) vào hàm createShippingAddress() – create-shipping-address.js
– step into (F11) vào hàm addressConverter.formAddressDataToQuoteAddress, hàm này sẽ chế biến lại object shipping address – address-converter.js
– step over (F10) qua file mới new-customer-address.js, hàm này sẽ trả về thông tin shipping address
– nghỉ

Kết quả thu được, ta đã nắm được 1 số file js và hàm trong quá trình Magento 2 build data address shipping, việc này cực kỳ có ích khi bạn muốn viết chức năng bổ sung thêm trường quận huyện, phường xã (cho Việt Nam) vào địa chỉ shipping (mặc định Magento chỉ có đất nước, bang – theo chuẩn quốc tế)

Ví dụ: ta sẽ custom lại file new-customer-address.js return thêm dữ liệu quận huyện, phường xã

Tổng kết

Trên đây là những kỹ năng debug để bạn trang bị trong quá trình kiếm cơm bằng Magento 2, mình sẽ chốt bài viết này bằng vài lời khuyên có thể sẽ giúp quá trình debug của bạn thêm phần hiệu quả:

– Nếu debug không ra, mò mẫm mù con mắt biết bao luồng hoạt động mà vẫn chưa thấy con bug chết bầm thì hãy: trấn tĩnh lại, thay đổi hướng tiếp cận, đặt breakpoint rộng ra, kiểu tra lại các giả thiết, đi hỏi thằng có kinh nghiệm.
– Hạn chế work around, fix tạm bợ để tránh lỗi này, xì lỗi kia, trừ khi quá cấp bách như vợ đang đi đẻ chẳng hạn. Lạm dụng việc này sẽ không giúp bạn tiến bộ được.
– Nghiêm cấm vừa debug vừa lầm bầm chửi thằng trời đánh nào code ra đống bùi nhùi này, nên nhớ làm gì có code nào mà không có bug, thái độ lồi lõm chỉ gây ức chế bản thân và anh em xung quanh mà không làm bạn pro hơn chút xíu nào.

Debug trong Magento 2
Đánh giá bài viết

Gửi phản hồi

Your email address will not be published. Required fields are marked *