In biến PHP trong JavaScript

Các lập trình viên PHP thường gặp sự cố khi cố gắng tạo động mã JavaScript. Vấn đề là một số ký tự cần được thoát trong JavaScript và cả trong PHP. Việc nhân đôi này có thể khó nắm bắt

Thoát khỏi trích dẫn và ngắt dòng

Giả sử bạn bắt đầu với một biến PHP cần được hiển thị trong hộp thoại xác nhận hoặc cảnh báo JavaScript

$message = "a short piece of text spanning more than one line and containing \"double\" & 'single' quotes";

Cách rõ ràng để biến điều này thành một cảnh báo là

nhưng điều đó dẫn đến mã JavaScript không hợp lệ.

Có hai vấn đề. Thứ nhất, ngắt dòng bên trong một biến JavaScript không phải là một tùy chọn. Chúng sẽ cần được thay thế bằng \n (ký tự đại diện cho dấu ngắt dòng). Thứ hai, dấu ngoặc kép bên trong văn bản xung đột với dấu ngoặc kép bên ngoài của cuộc gọi cảnh báo

Học hỏi từ những sai lầm của chúng tôi, đây là một số mã thực sự hoạt động

Đoạn mã trên dựa vào PHP được nhúng trong mã HTML. Nếu bạn đang xuất toàn bộ trang từ PHP thì bạn cần tiến thêm một bước

$message = preg_replace("/\r?\n/", "\\n", addslashes($message)); echo "\n\n";

đầu ra bây giờ là

Cách tiếp cận tương tự có thể được áp dụng trong hầu hết mọi tình huống mà PHP cần chuyển các biến sang JavaScript

Khi cố gắng gỡ lỗi loại mã này, trước tiên bạn phải luôn kiểm tra xem mã nào hợp lệ trong JavaScript (hầu hết các trình duyệt hiện đại đều có trình gỡ lỗi tích hợp sẵn cho mã này) và chỉ sau đó mới xem cách nó có thể được tạo từ PHP

Ghi chú. Không cần mã hóa các ký tự như & và " thành các thực thể HTML của chúng vì JavaScript là ngôn ngữ riêng biệt với HTML và có thể xử lý chúng mà không gặp vấn đề gì

Là một ngôn ngữ lập trình, PHP là ngôn ngữ yêu thích của nhà phát triển. Một thực tiễn tốt nhất về lập trình PHP thiết yếu là cách đăng nhập vào bảng điều khiển trong PHP. Hôm nay, chúng tôi sẽ trình bày cách bạn làm điều đó

PHP là một trong những ngôn ngữ kịch bản phía máy chủ phổ biến nhất để xây dựng các ứng dụng web vì nó dễ sử dụng. Nhưng bất kể bạn xây dựng gì, ghi lỗi là chìa khóa để đảm bảo chu trình phản hồi học mã-kiểm tra mã ngắn

PHP được thiết kế độc đáo để tốt cho việc xây dựng các ứng dụng web. Tuy nhiên, PHP được phát triển trước các trình duyệt hiện đại, do đó, nó thiếu một cách dễ dàng để ghi lỗi vào bảng điều khiển trình duyệt. Sử dụng JavaScript, đăng nhập vào bảng điều khiển đơn giản như thế này

console.log("Message here");

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách đăng nhập vào bảng điều khiển trong PHP và tại sao đăng nhập bằng PHP có thể là một điều tốt. Hơn nữa, chúng tôi sẽ giải quyết cách đăng nhập vào bảng điều khiển bằng JavaScript dễ dàng như thế nào. Bạn có thể có những điều tốt nhất của cả hai thế giới. tận hưởng sức mạnh của PHP và đăng nhập vào bảng điều khiển trong PHP

Mẹo. Tìm lỗi ứng dụng và các vấn đề về hiệu suất ngay lập tức với Stackify Retrace

Khắc phục sự cố và tối ưu hóa mã của bạn thật dễ dàng với các lỗi tích hợp, nhật ký và thông tin chi tiết về hiệu suất cấp mã

In biến PHP trong JavaScript
In biến PHP trong JavaScript

Bảng điều khiển trình duyệt là gì?

Trước hết chúng ta cần hiểu bảng điều khiển trình duyệt là gì

Bảng điều khiển trình duyệt là một cách để trình duyệt ghi lại thông tin được liên kết với một trang web cụ thể. Thông tin được ghi bao gồm các yêu cầu mạng, JavaScript, CSS, cảnh báo và lỗi bảo mật, cũng như lỗi, cảnh báo và thông báo thông tin được ghi lại rõ ràng bằng mã JavaScript chạy trong ngữ cảnh trang

Để trình diễn, chúng tôi sẽ sử dụng phiên bản Google Chrome dành cho máy tính để bàn, nhưng bạn cũng có thể thực hiện các bước tương tự trong các phiên bản Firefox, Safari và Internet Explorer dành cho máy tính để bàn.  

Để bắt đầu, hãy mở Google Chrome và truy cập bất kỳ trang web nào, nhấp chuột phải và chọn Kiểm tra để hiển thị Công cụ dành cho nhà phát triển của Chrome

In biến PHP trong JavaScript
Hình. 1. Cách kích hoạt Công cụ dành cho nhà phát triển trong Chrome
In biến PHP trong JavaScript
Hình. 2. Công cụ dành cho nhà phát triển trong Chrome sau khi nhấp vào Kiểm tra

Bảng điều khiển trình duyệt sẽ là một trong các tab trong Công cụ dành cho nhà phát triển. Và bạn có thể kiểm tra bằng cách viết cùng một bảng điều khiển JavaScript. ghi lệnh

In biến PHP trong JavaScript
Quả sung. 3. Cách đăng nhập vào bảng điều khiển bằng JavaScript

Tại sao đăng nhập vào bảng điều khiển là một điều tốt

Có hai lý do chính khiến bạn muốn đăng nhập vào bảng điều khiển trình duyệt

Đầu tiên là sự đơn giản. Là nhà phát triển PHP, bạn muốn làm việc với nhiều nhất hai ứng dụng, trình soạn thảo mã hoặc IDE yêu thích của bạn và trình duyệt của bạn. Vì bạn thường chuyển đổi giữa hai loại này khi viết mã trong trình chỉnh sửa và kiểm tra mã đó trên trình duyệt, nên vị trí tự nhiên nhất để hiển thị báo cáo nhật ký là bên trong trình duyệt

Lý do thứ hai là để giữ cho việc ghi nhật ký ít xâm nhập nhất có thể. Giờ đây, bạn có thể đăng nhập bằng các hàm gốc của PHP, chẳng hạn như var_dump. Tuy nhiên, khi bạn sử dụng var_dump, bạn cần quyết định nơi bạn muốn ghi đầu ra vào

Bạn có thể ghi đầu ra vào trang web của trình duyệt, nhưng điều này có thể sẽ làm biến dạng màn hình. Một đích đến khả thi khác cho đầu ra có thể là một tệp trong máy chủ của bạn. Đối với tùy chọn này, chúng tôi khuyên dùng thư viện ghi nhật ký mã nguồn mở như Monolog thay vì var_dump. Nếu bạn muốn xuất các biến chế độ xem mà không làm biến dạng trang web, thì việc đăng nhập vào bảng điều khiển trình duyệt sẽ tốt hơn

Một điều khác cần lưu ý là các nhà phát triển PHP đang ngày càng bị thu hút bởi các framework như Laravel và Symfony. Các khung này thường sử dụng các thư viện ghi nhật ký PHP phổ biến như Monolog. Các thư viện ghi nhật ký PHP hoạt động tốt nhất khi xuất ra bảng phân tích chi tiết về dấu vết ngăn xếp lỗi đối với các lỗi phía máy chủ, chẳng hạn như kết nối cơ sở dữ liệu vào các tệp

Chúng tôi có một hướng dẫn về ghi nhật ký độc thoại cho những tình huống như vậy, nơi bạn có thể tìm hiểu cách gửi nhật ký tới Retrace. Đôi khi bạn chỉ muốn một cái gì đó nhẹ để hiển thị bên trong trình duyệt để gỡ lỗi giao diện người dùng. Đối với những tình huống như vậy, đăng nhập vào bảng điều khiển sẽ là lý tưởng. Hơn nữa, bạn có thể kết hợp kỹ thuật này với các phương thức ghi nhật ký PHP tiêu chuẩn để thiết lập phát triển hoàn chỉnh hơn

Cách đăng nhập trực tiếp vào bảng điều khiển bằng mã PHP

Có hai cách chính để bạn có thể đăng nhập trực tiếp vào bảng điều khiển bằng (hầu hết) mã PHP – hàm json_encode và các thư viện PHP

Sử dụng hàm json_encode

Giả sử bạn muốn điều khiển log một biến PHP $view_variable trong lớp xem của bạn. Nhớ lại bảng điều khiển đó. nhật ký là một chức năng JavaScript. Nguyên tắc chính là chúng ta có thể sử dụng JSON để truyền biến PHP cho hàm JavaScript. Bạn tạo một hàm PHP như thế này

function console_log($output, $with_script_tags = true) {
$js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) .
');';
if ($with_script_tags) {
$js_code = '';
}
echo $js_code;
}

Bạn có thể gọi hàm này tại chính nơi bạn muốn chạy console_log mà chúng ta vừa tạo ở trên. Một ví dụ về cách sử dụng của nó sẽ như thế này






Và đánh dấu HTML được tạo sẽ là thế này





Hãy nhớ bao gồm định nghĩa của hàm PHP console_log tùy chỉnh để gọi nó nhiều lần nếu cần. Nếu bạn muốn chuyển đổi chuỗi JSON thành các dạng khác, bạn có thể tham khảo danh sách các hằng mà json_encode sử dụng. Các hằng số hữu ích mà bạn có nhiều khả năng sử dụng hơn là JSON_FORCE_OBJECT và JSON_PRETTY_PRINT

Đăng nhập ở giữa mã JavaScript của bạn

Đôi khi bạn không muốn cài đặt các thư viện PHP trừ khi bạn hoàn toàn chắc chắn rằng mình phải cài đặt. Bạn có thể thích ghi nhật ký bảng điều khiển các biến PHP ở giữa mã JavaScript được tìm thấy trong các tệp xem PHP của bạn. Bạn có thể sử dụng kỹ thuật tương tự theo cách này

Sử dụng các thư viện PHP để ghi nhật ký bảng điều khiển

Nếu bạn muốn sử dụng các thư viện nguồn mở đã giải quyết vấn đề này, chúng tôi khuyên bạn nên sử dụng hai tùy chọn – PHPDebugConsole (hướng dẫn cài đặt và mã tại đây) và PHPConsole (hướng dẫn cài đặt và mã tại đây)

So sánh giữa PHPDebugConsole và PHPConsole

So sánh nhanh giữa hai thư viện mang lại phân tích sau

So sánh nhanh giữa hai thư viện mang lại phân tích sau

PHPConsole dường như được thiết lập nhiều hơn với 1. 3k sao trên repo GitHub của nó. Tại thời điểm viết bài, bản cập nhật cuối cùng của PHPConsole là tháng 9 năm 2019 và có ít lượt xác nhận hơn (126). Tiện ích mở rộng của Chrome được khuyến nghị cho PHPConsole dường như được tác giả bởi cùng những người đứng sau PHPConsole. Cuối cùng, trang web demo PHPConsole không còn hoạt động nữa, tôi đã kiểm tra lần cuối

Trong khi đó, PHPDebugConsole có 51 sao trên repo GitHub, lịch sử cập nhật thường xuyên hơn và 797 lần xác nhận với ba lần xác nhận cuối cùng đều diễn ra vào tháng 11 năm 2021. Tài liệu đề xuất một số tiện ích mở rộng trình duyệt mà PHPDebugConsole có thể hoạt động và bao gồm các ví dụ demo

Cân nhắc tất cả những điều trên, chúng tôi khuyên bạn nên chọn PHPDebugConsole nếu bạn muốn sử dụng thư viện PHP để ghi nhật ký bảng điều khiển. Nhìn chung, chúng tôi đề xuất ma trận quyết định sau

  • Nếu bạn muốn đơn giản, hãy sử dụng hàm PHP json_encode
  • Nếu bạn muốn sử dụng các tính năng mở rộng hơn như bảng điều khiển. thông tin, hãy sử dụng PHPDebugConsole với PHPConsole làm bản sao lưu của bạn
Một ví dụ từ PHPDebugConsole

Đây là một ví dụ được lấy từ trang web demo tuyệt vời của PHPDebugConsole

 true, // turn logging on
    'output' => true, // if left false (default), the output() method will return an empty string
));

/**
 * Example Class
 * Demonstrates PHP reflection and PHPDocBlock
 */
class Example
{
    private $offLimits = 'I\'m a private property';

    public function __toString() {
        return 'It\'s Magic';
    }

    /**
     * Foo is a private method that does stuff
     *
     * @param string $bar the string you want to foo
     *
     * @return string the fooed string
     */
    private function foo($bar) {
    }
}

$debug->info('PHPDebugConsole is great!');
$debug->warn('No browser plugin necessary');
$debug->log('features/options', array(
    'PHP port of the javascript web console API',
    'outputOpts' => array(
        'HTML (as seen here)',
        'ChromeLogger',
        'FirePHP',
        'Plain-text / file',
        '