Tôi có thể viết javascript trong phpstorm không?

Như chúng ta đã thấy, một số lượng lớn các ví dụ đã được sử dụng để giải quyết vấn đề Webstorm Vs Phpstorm đã xuất hiện

WebStorm có tốt hơn PhpStorm không?

Tương tự, PHPStorm và WebStorm lần lượt là hai IDE dành cho PHP và JavaScript. Bảng so sánh giữa PHPStorm và WebStorm

Tôi có thể sử dụng WebStorm cho PHP không?

Tất cả các tính năng trong WebStorm đều được đưa vào PhpStorm, với sự hỗ trợ đầy đủ cho PHP và hỗ trợ Cơ sở dữ liệu/SQL được bổ sung ở trên cùng

Điều gì tốt hơn PhpStorm?

Apache NetBeans là một trong những lựa chọn thay thế mã nguồn mở và miễn phí tốt nhất cho PhpStorm dành cho doanh nghiệp và cá nhân sử dụng. Công cụ này có các công cụ chỉnh sửa thông minh cho phép các nhà phát triển cấu trúc lại mã của họ một cách dễ dàng. 22-Jul-2022

PhpStorm có tốt cho JavaScript không?

Với PhpStorm, bạn có thể phát triển các ứng dụng web, thiết bị di động và máy tính để bàn hiện đại bằng JavaScript và Node. js. PhpStorm cũng hỗ trợ React, Angular, Vue. js và các khung khác, đồng thời cung cấp khả năng tích hợp chặt chẽ với nhiều công cụ khác nhau để phát triển web. 01-Aug-2022

PHPStorm có tốt hơn Vscode không?

"Ý tưởng tốt nhất cho php", "Dễ sử dụng" và "Chức năng" là những yếu tố chính khiến các nhà phát triển xem xét PhpStorm;

WebStorm có tốt hơn Vscode không?

WebStorm nói chung hiệu quả hơn trong việc tái cấu trúc và kiểm tra JavaScript và mã dựa trên JavaScript (chẳng hạn như TypeScript). Tái cấu trúc tối ưu hóa mã để đạt hiệu quả, trong khi thử nghiệm đơn vị đảm bảo chất lượng sản phẩm. VS Code vẫn cung cấp các tính năng này — nhưng chúng không phù hợp với JavaScript. 09-Jun-2022

IDE miễn phí tốt nhất cho PHP là gì?

5 IDE PHP miễn phí tốt nhất

• Nhật thực PDT
• IDE Komodo
• Apache NetBeans
• Eclipse Che (đám mây IDE)
• MãLite

Tôi có thể sử dụng PhpStorm miễn phí không?

PhpStorm bao gồm mã cấp phép đánh giá cho bản dùng thử miễn phí 30 ngày. PhpStorm bao gồm mã cấp phép đánh giá cho bản dùng thử miễn phí 30 ngày. PhpStorm bao gồm mã cấp phép đánh giá cho bản dùng thử miễn phí 30 ngày

WebStorm có miễn phí không?

WebStorm bao gồm khóa cấp phép đánh giá cho bản dùng thử miễn phí 30 ngày

Tại sao PhpStorm tốt?

PhpStorm giúp bạn xử lý mã hiệu quả hơn và tiết kiệm thời gian khi làm việc với các dự án lớn. Chuyển đến một phương thức, hàm hoặc định nghĩa biến chỉ bằng một cú nhấp chuột hoặc tìm kiếm các tập quán của nó

PhpStorm cũng cung cấp các công cụ để gỡ lỗi JavaScript của bạn bằng tiện ích mở rộng của Chrome hoặc Firefox với IDE. Bài học này cho biết cách đặt điểm dừng của bạn và hướng dẫn bạn quy trình gỡ lỗi phía máy khách

Kể từ khi tôi phát hiện ra cách định cấu hình PhpStorm với Xdebug để gỡ lỗi, đó là giải pháp tiếp theo của tôi để tìm ra các lỗi khó tái tạo. Điều mà tôi không biết cho đến gần đây là nó cũng có thể gỡ lỗi JavaScript bằng cách sử dụng cùng một thiết lập, điều này khiến tôi rất ngạc nhiên

PHP là ngôn ngữ phụ trợ và JavaScript (đối với tôi) là ngôn ngữ giao diện người dùng. Làm thế nào là phép thuật này thậm chí có thể?

Tại sao nên sử dụng Trình gỡ lỗi PhpStorm?

Được xây dựng bởi JetBrains, PhpStorm theo ý kiến ​​của tôi — và ý kiến ​​của nhiều đồng nghiệp của tôi — là IDE tốt nhất để phát triển PHP. PhpStorm hỗ trợ các tính năng Xdebug nâng cao như gỡ lỗi từ xa, nhưng một trong những tính năng yêu thích của tôi là thiết lập gỡ lỗi cấu hình bằng không. Nó làm tôi nhớ lại những ngày Delphi/Visual Basic của tôi khi IDE phát triển có trình gỡ lỗi từng bước tích hợp sẵn mà bạn có thể bật bằng cách đặt một vài điểm ngắt và chạy mã ứng dụng

PhpStorm cũng đi kèm với trình gỡ lỗi JavaScript, rất đơn giản để thiết lập và sử dụng. Một trong những lợi thế lớn nhất của việc thiết lập tính năng này cùng với trình gỡ lỗi PHP là có thể gỡ lỗi cả JavaScript và PHP trong cùng một phiên

Bạn sẽ biết điều này có thể khó khăn như thế nào nếu bạn đã từng phải gỡ lỗi một yêu cầu không đồng bộ của WordPress được xử lý bởi

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

7 hoặc API WP REST. Trước tiên, bạn phải loại trừ nếu vấn đề nằm ở JavaScript. Bạn có thể thử thêm một lệnh gọi

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

8 tại điểm thực hiện yêu cầu không đồng bộ, nhưng bạn thường phải thêm một vài lệnh để xem điều gì đang xảy ra tại các điểm khác nhau trong quá trình thực thi. Điều này rất chậm, khiến bạn mất thời gian quý báu. Không chỉ vậy, các dự án JavaScript hiện đại thường sử dụng các công cụ xây dựng như Grunt, Gulp, webpack hoặc npm scripts. Bạn phải đợi tác vụ xây dựng hoàn thành để xem đầu ra của mình, thậm chí còn tốn nhiều thời gian hơn

Các trình duyệt web như Google Chrome, Firefox và Safari có trình gỡ lỗi JavaScript của riêng chúng. Tuy nhiên, nếu bạn đang xử lý một ứng dụng sử dụng PHP và JavaScript, thì việc tiếp tục chuyển sang trình gỡ lỗi bên ngoài IDE sẽ khiến bạn mất tập trung. Có thể gỡ lỗi và kiểm tra mọi thứ đang diễn ra ở một nơi là một điểm cộng rất lớn

Điều này làm nổi bật ưu điểm thứ hai của trình gỡ lỗi PhpStorm. có các điểm dừng được lưu một cách đáng tin cậy giữa các lần làm mới trang. Trình gỡ lỗi của trình duyệt sẽ không lưu các điểm ngắt khi bạn làm mới trang nếu có một chuỗi chặn truy xuất bộ nhớ cache được thêm vào URL trong thẻ tập lệnh. Xóa chuỗi ngẫu nhiên và/hoặc thiết lập bản đồ nguồn để trợ giúp tập lệnh của bạn, nhưng không phải lúc nào cũng có thể thực hiện được

Thuyết phục chưa?

đến hội thảo

Để gỡ lỗi PHP, bạn sẽ cần thiết lập PhpStorm để gỡ lỗi các tập lệnh PHP của mình bằng Xdebug, điều này cũng yêu cầu bạn cài đặt tiện ích mở rộng trình duyệt Xdebug. Gỡ lỗi JavaScript trong PhpStorm chỉ được hỗ trợ trên các trình duyệt dựa trên Chrome hoặc Chromium, vì vậy, để đảm bảo mọi thứ nhất quán, bạn cần cài đặt và bật trình trợ giúp Chrome Xdebug cho trang web cục bộ mà bạn đang gỡ lỗi. Cá nhân tôi sử dụng Brave, nhưng mọi trình duyệt Chromium khác đều hoạt động

Sau đó, bạn có thể định cấu hình trình gỡ lỗi JavaScript PhpStorm. Tài liệu PhpStorm đi sâu, nhưng tôi sẽ đề cập đến những điều cơ bản ở đây

Đầu tiên, bạn tạo cấu hình gỡ lỗi JavaScript. Từ menu PhpStorm, nhấp vào Chạy và sau đó Chỉnh sửa cấu hình. Thao tác này sẽ mở hộp thoại “Chạy/Gỡ lỗi cấu hình”

Tiếp theo, nhấp vào dấu cộng ở trên cùng bên trái để thêm cấu hình mới, sau đó chọn Gỡ lỗi JavaScript từ hộp chọn

Thao tác này sẽ tạo Cấu hình gỡ lỗi JavaScript mới và yêu cầu bạn nhập “Tên” và “URL”

Bạn có thể chọn trình duyệt bạn muốn sử dụng để gỡ lỗi JavaScript từ menu thả xuống của trình duyệt. Như đã đề cập trước đó, đây cần phải là một trình duyệt dựa trên Chromium. Ngay cả khi bạn cố gắng chỉnh sửa danh sách trình duyệt có sẵn và bật Firefox, nó sẽ không xuất hiện dưới dạng tùy chọn. Tin tôi đi, tôi đã thử

Khi bạn đã thiết lập trình gỡ lỗi JavaScript, bạn đã hoàn tất và bạn có thể bắt đầu gỡ lỗi mã PHP và JavaScript của mình trong cùng một phiên

Gỡ lỗi JavaScript và PHP

Chúng tôi đã đề cập đến cách gỡ lỗi PHP trong một bài viết khác, vì vậy tôi sẽ tập trung vào JavaScript tại đây. Tôi đã tạo một plugin rất nhỏ có lỗi trong cả mã PHP và JavaScript

Plugin cho phép người dùng quản trị thêm biểu mẫu vào bất kỳ bài đăng hoặc trang nào thông qua mã ngắn. Biểu mẫu yêu cầu câu trả lời cho câu hỏi toán học và việc gửi biểu mẫu sẽ hiển thị lỗi hoặc thông báo thành công. Tuy nhiên, nó không hoạt động bình thường và tôi nhận được thông báo "Ồ, đã xảy ra lỗi". Plugin này sử dụng cả PHP và JavaScript và tôi không biết lỗi ở đâu

Mã PHP chứa ba hàm gọi lại hook hành động, một để xử lý tệp JavaScript

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

9, một để xử lý yêu cầu AJAX và một để hiển thị biểu mẫu bằng cách sử dụng mã ngắn

Tệp

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

9 đăng ký một trình lắng nghe sự kiện trên nút Gửi của biểu mẫu, nút này sẽ kích hoạt yêu cầu

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

1 của jQuery tới URL

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

7 của WordPress và sẽ trả về đối tượng JSON từ hàm có liên quan trong PHP, sau đó được hiển thị cho người dùng trong một tệp

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

3

Nếu bạn muốn xem toàn bộ quá trình này đang hoạt động, bạn có thể chuyển sang video đầy đủ, được tường thuật về việc tôi gỡ lỗi mã

Như với PHP, để bắt đầu gỡ lỗi JavaScript, trước tiên tôi cần đặt một số điểm ngắt. Trong PhpStorm, đây là trường hợp nhấp vào rãnh bên cạnh dòng mã mà bạn muốn trình gỡ lỗi tạm dừng thực thi. Trong trường hợp của tôi, tôi đã tạo một điểm dừng ở dòng 6, nơi đối tượng

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

0 được xác định

Sau đó, tôi cần cho PhpStorm biết nó sẽ khởi động trình gỡ lỗi JavaScript. Tôi làm điều này bằng cách nhấp vào biểu tượng gỡ lỗi trên thanh công cụ PhpStorm

Nếu bạn đã tắt thanh công cụ, bạn cũng có thể bắt đầu trình gỡ lỗi JavaScript bằng cách nhấp vào Chạy rồi nhấp vào Gỡ lỗi từ menu PhpStorm. Thao tác này sẽ mở một phiên bản mới của trình duyệt Chromium mà bạn đã chỉ định ở bước trước đó

Sau khi kích hoạt điểm dừng và phiên gỡ lỗi, tôi nhập một giá trị vào trường văn bản và nhấp vào nút “Gửi”. Trình gỡ lỗi JavaScript mở tại điểm ngắt và tôi có thể duyệt qua các dòng mã khác nhau. Lợi ích của trình gỡ lỗi là tôi có thể kiểm tra bất kỳ biến nào trong mã của mình trong bảng "Biến", cũng như thêm các biến cụ thể vào danh sách theo dõi. Trong trường hợp này, tôi đã thêm đối tượng

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

0 vào danh sách theo dõi và ngay lập tức tôi thấy rằng khóa đối tượng

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

2 có giá trị không xác định. Sau đó, tôi kiểm tra đối tượng

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

3 trong bảng "Biến". Tôi thấy rằng nonce được lưu trữ trong khóa

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

4, nhưng trong mã của tôi, tôi đang sử dụng

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

5 để thay thế. Lỗi đầu tiên được tìm thấy

Vì vậy, tôi dừng trình gỡ lỗi, sửa mã không chính xác, làm mới trình duyệt và kích hoạt lại việc gửi biểu mẫu. Tôi xem qua mã và mọi thứ được gán đúng giá trị, nhưng tôi vẫn nhận được thông báo "Ôi trời, đã xảy ra lỗi". Tôi quay lại PhpStorm và xem tab “Bảng điều khiển” của trình gỡ lỗi. Lưu ý rằng đầu ra của bảng điều khiển này giống với đầu ra mà tôi thấy trong các công cụ dành cho nhà phát triển của trình duyệt. rất tiện lợi

Từ thông báo lỗi, tôi có thể thấy rằng đã xảy ra lỗi trong tệp

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

7. Cho rằng đó là tệp WordPress cốt lõi, có thể đã xảy ra sự cố với mã plugin của tôi, nhưng tôi không chắc điều gì. Điều tuyệt vời về thiết lập này là tôi có thể nhấp vào tệp

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

7 trong bảng điều khiển trình gỡ lỗi để mở tệp đó. Sau đó, tôi có thể đặt một điểm dừng trong mã PHP

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

7 để xem điều gì đang xảy ra

Đây là một trình tiết kiệm thời gian lớn. Nếu tôi đang kiểm tra bảng điều khiển trong trình duyệt, trước tiên tôi phải xác định tệp PHP nào đang được gọi, sau đó quay lại PhpStorm, tìm tệp đó và đặt điểm ngắt. Với trình gỡ lỗi, tôi chỉ cần nhấp vào tệp và tôi đang ở nơi tôi cần đến. Tôi đặt một điểm ngắt ở vị trí mà

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

7 tạo biến

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

0, sau đó nhấp lại vào nút “Gửi” trên biểu mẫu

Phiên trình gỡ lỗi vẫn đang hoạt động và dừng ở điểm dừng đầu tiên trong

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

9. Điều đó tốt, vì vậy tôi xem qua mã để xem điều gì sẽ xảy ra. Hóa ra, nó đã đến mức tìm kiếm một hook hành động có định dạng

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

2, nó ngay lập tức kích hoạt trí nhớ của tôi. 💡

Khi tôi đăng ký hook hành động có liên quan trong mã plugin PHP, tôi đã không sử dụng tùy chọn

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

3 để biểu thị một yêu cầu Ajax không yêu cầu người dùng đăng nhập. Tôi để mã kết thúc thực thi, quay lại mã PHP của mình và thay đổi hook hành động thành

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

4. Để chắc chắn, tôi cũng đặt một điểm ngắt ở dòng đầu tiên trong chức năng gọi lại, vì vậy tôi có thể duyệt qua mã đó trong trường hợp có bất kỳ lỗi nào khác

May mắn thay, không còn lỗi nào trong mã và nó thực thi thành công

Nói chung, quá trình này mất khoảng 2 phút để tìm ra

Gỡ lỗi trong hành động

Có thể chuyển đổi giữa gỡ lỗi mã JavaScript và mã PHP là rất quan trọng để tìm ra vấn đề này. Nếu tôi chỉ dựa vào việc sử dụng Xdebug cho mã PHP, hoặc thậm chí sử dụng hàm

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

5 của PHP để đăng nhập vào tệp

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

6, sau đó sử dụng hàm

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

8 của JavaScript để đăng nhập vào bảng điều khiển, thì tôi sẽ phải kiểm tra nhiều nơi và tiếp tục tải lại bảng điều khiển. . Với trình gỡ lỗi, tôi có thể thấy ngay những gì đang diễn ra, thực hiện các thay đổi cần thiết và chạy lại mã để xem kết quả

Làm việc với công cụ xây dựng

Ngay bây giờ, bạn có thể muốn chạy đi và tự mình thử điều này, nhưng trước khi làm điều đó, hãy nói về các công cụ xây dựng. Tùy thuộc vào thiết lập phát triển của bạn, bạn có thể đang sử dụng các trình chạy tác vụ như Grunt hoặc Gulp. Họ có thể lấy nhiều tệp JavaScript, nối chúng thành một tệp sản xuất cuối cùng và thu nhỏ mã cùng lúc hoặc thu nhỏ một tệp nguồn thành tệp sản xuất được cung cấp cho trình duyệt. Bạn có thể đang làm việc với một khung JavaScript như React hoặc Vue, sử dụng webpack và gói mã nguồn vào một tệp JavaScript duy nhất

Người chạy nhiệm vụ

Một ưu điểm khác của trình gỡ lỗi JavaScript PhpStorm là nó cho phép bạn xác định các tác vụ hoặc tập lệnh sẽ chạy trước khi bắt đầu gỡ lỗi. Nếu bạn sử dụng Grunt hoặc Gulp thì đây là một bổ sung hữu ích. Tuy nhiên, bạn sẽ phải đảm bảo rằng các điểm dừng của mình nằm trong đúng tệp. Tùy thuộc vào nơi lưu trữ các tệp sản xuất cuối cùng của bạn, bạn sẽ cần đảm bảo rằng các điểm dừng nằm trong các tệp này, thay vì các tệp nguồn

Thay vào đó, điều mà nhiều nhà phát triển làm là sử dụng hằng số SCRIPT_DEBUG của WordPress và chỉ định một tệp khác sẽ được xử lý cho WordPress tùy thuộc vào hằng số đó

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

2

Bây giờ, tất cả những gì bạn cần làm để đặt điểm dừng trên tệp nguồn là xác định hằng số là

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

8 trong

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

9 của bạn trong khi bạn đang gỡ lỗi

Gói mô-đun

Gói mô-đun như webpack là một câu chuyện khác. Nếu bạn đang sử dụng webpack, thì thường là do khung JavaScript sử dụng cú pháp mà các trình duyệt không thể hiểu nếu không dịch mã nguồn. Một ví dụ về điều này là một khối WordPress, sử dụng khung React và cú pháp JSX

Tôi đã thêm hỗ trợ trình chỉnh sửa khối và khối lời chứng thực tùy chỉnh vào plugin ví dụ của mình để cho thấy cách thức hoạt động của nó. Đây là giao diện của khối JSX cho thành phần

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

70

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

Đây là một phần của mã được dịch mã đăng ký khối lời chứng thực, bao gồm các thành phần chỉnh sửa và lưu. Tôi đã phải định dạng lại tệp

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

71 đã được dịch mã để tìm mã này—một tính năng tiện dụng khác của PhpStorm—vì tất cả mã này được rút gọn trên một dòng trong tệp được dịch mã cuối cùng

    var e, n = {
        273: function () {
            var e = window.wp.blocks, n = window.wp.element, o = window.wp.i18n, r = window.wp.blockEditor;
            (0, e.registerBlockType)("create-block/testimonial-block", {
                edit: function () {
                    return (0, n.createElement)("p", (0, r.useBlockProps)(), (0, o.__)("Testimonial Block – hello from the editor!", "testimonial-block"))
                }, save: function () {
                    return (0, n.createElement)("p", r.useBlockProps.save(), (0, o.__)("Testimonial Block – hello from the saved content!", "testimonial-block"))
                }
            })
        }
    }, o = {};

Nếu tôi muốn gỡ lỗi thành phần chỉnh sửa, tôi sẽ chạy tập lệnh

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

72, định dạng lại mã đã dịch mã và đặt điểm ngắt trên dòng

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

73. Định dạng thủ công mã được dịch mã để tìm ra vị trí đặt điểm ngắt sau khi chạy

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

74 mỗi khi bạn thực hiện thay đổi sẽ nhanh chóng cũ đi

May mắn thay, những người ở Jetbrains cũng cung cấp một sản phẩm dành cho các nhà phát triển giao diện người dùng có tên là WebStorm. WebStorm về cơ bản là PhpStorm không hỗ trợ PHP và các công nghệ liên quan, tập trung vào phát triển giao diện người dùng và các khung như React, Vue hoặc bất kỳ khung nào khác sử dụng webpack. Nó thậm chí còn hỗ trợ các tính năng như chèn ngôn ngữ cho CSS nội tuyến. PhpStorm vận chuyển với tất cả các chức năng giống như WebStorm

Tôi đã phải tìm hiểu một chút trên blog WebStorm, nhưng hóa ra là cả WebStorm và PhpStorm đều hỗ trợ gỡ lỗi JavaScript khi dự án của bạn đang chạy ở “chế độ phát triển” bằng cách sử dụng máy chủ nhà phát triển webpack. Đối với hầu hết các dự án dựa trên webpack, tất cả điều này có nghĩa là đảm bảo bạn chạy

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

75 trước khi bật gỡ lỗi JavaScript

Bạn có thể cần cập nhật URL gỡ lỗi JavaScript để khớp với URL máy chủ webpack dev của bạn nếu nó đang chạy trên một URL khác. Trong trường hợp phát triển một khối WordPress, URL máy chủ webpack dev giống với URL trang web WordPress, vì vậy tôi không cần thay đổi bất cứ điều gì

Tôi đã mở tệp

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

76 của khối mới, đặt điểm dừng và chạy

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

75 để khởi động máy chủ phát triển. Khi nó đang chạy, tôi đã khởi chạy trình gỡ lỗi JavaScript. Sau đó, tôi vào trang quản trị WordPress, chỉnh sửa một bài đăng và thêm khối lời chứng thực vào trình chỉnh sửa khối. Thật tuyệt vời, quá trình gỡ lỗi của PhpStorm đã bắt đầu và tôi có thể xem qua mã JSX cho khối

Làm xước bề mặt

Tôi ghét dùng từ “dễ dàng” trong hướng dẫn kỹ thuật, nhưng nếu bạn có thể làm theo các bước cấu hình gỡ lỗi không cấu hình của PhpStorm để bắt đầu gỡ lỗi PHP, thì việc tạo một (hoặc hai) cấu hình gỡ lỗi JavaScript không còn khó khăn nữa. Tôi đã mong dành hàng giờ để tranh luận mọi thứ. Cuối cùng, tôi mất khoảng 30 phút để thiết lập và bắt đầu gỡ lỗi các tệp JS của mình. Sau đó, thêm một giờ đọc tài liệu, tạo một ứng dụng React riêng trong PhpStorm và kiểm tra các cấu hình gỡ lỗi để sao chép nó cho khối WordPress của tôi

Được kết hợp với Xdebug để gỡ lỗi PHP, trình gỡ lỗi JavaScript PhpStorm tạo nên một sự kết hợp mạnh mẽ để hỗ trợ gỡ lỗi và đào sâu mã phức tạp. Mặc dù sử dụng những thứ như

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

78 và

export default function Edit() {
    return (
        

            {__(
                'Testimonial Block – hello from the editor!',
                'testimonial-block'
            )}
        
    );
}

79 vẫn hữu ích, nhưng nếu tôi đang chăm chỉ tìm kiếm các lỗi trên mã bao gồm PHP và JavaScript, điều này sẽ giúp tôi tiết kiệm thời gian và đỡ đau đầu. Tôi chỉ ước mình biết về điều này khi tôi đang học cách xây dựng các khối WordPress tùy chỉnh

Bài viết này chỉ sơ lược về những gì trình gỡ lỗi PhpStorm có thể làm, nhưng tôi hy vọng nó sẽ khuyến khích bạn thử nó trong dự án tiếp theo của mình

Bạn có sử dụng trình gỡ lỗi PhpStorm không?

Mục nhập này đã được đăng trong WP Migrate DB Pro, Quy trình làm việc và được gắn thẻ Mẹo, Gỡ lỗi, PhpStorm, Mẹo phát triển, JavaScript, Xdebug

Thông tin về các Tác giả

Jonathan Bossenger

Jonathan là một người đam mê mã nguồn mở, nhà phát triển và nhà văn đến từ Cape Town, Nam Phi. Anh ấy thích tìm hiểu về các công nghệ web mới và chia sẻ kiến ​​thức đó với người khác. Dễ bị uống quá nhiều cà phê

@jon_bossenger jonathanbossenger. com

• 
  Danny nói.

  14 Tháng hai, 2017 lúc 1. 09 giờ tối

  Viết tốt lên 🙂

  Đáp lại

• 
  Jimmy nói.

  Tháng Hai 15, 2017 lúc 6. 33 giờ sáng

  Hàng tốt, cảm ơn bạn. Tôi sống chết với trình gỡ lỗi PHP, nó là một công cụ vô giá cho năng suất và học tập. Tôi chưa tìm hiểu sâu về trình gỡ lỗi JS nhưng đã muốn. Điều này sẽ cực kỳ hữu ích và cảm ơn bạn đã đăng các tài nguyên để làm việc với nội dung được rút gọn và bản đồ nguồn

  Đáp lại

• 
  john56457 nói.

  3 Tháng Năm, 2017 lúc 9. 49 giờ sáng

  Bạn đăng nhiều video hay hơn để hiểu chương trình về JavaScript và PHP. Tôi biết có nhiều sinh viên thích bài đăng này và họ tìm thấy nhiều mẹo hơn từ bài đăng của bạn

  Bạn có thể viết HTML bằng PhpStorm không?

  HTML PhpStorm mang đến sự hỗ trợ mạnh mẽ cho HTML bao gồm đánh dấu lỗi và cú pháp, định dạng theo kiểu mã, xác thực cấu trúc, hoàn thành mã .

  PhpStorm hỗ trợ những ngôn ngữ nào?

  PhpStorm là một IDE dựa trên Java đóng vai trò là trình soạn thảo cho PHP, HTML và JavaScript , một số ngôn ngữ lập trình phổ biến nhất.

  PhpStorm có hỗ trợ TypeScript không?

  Với PhpStorm, bạn có thể chạy và gỡ lỗi mã TypeScript phía máy khách và mã TypeScript chạy trong Node .

  PhpStorm có hỗ trợ nút JS không?

  PhpStorm cho phép bạn chạy và gỡ lỗi Node. ứng dụng js sử dụng Node. js trên Hệ thống con Windows dành cho Linux .