Cách tìm lỗi trong mã html trong notepad ++

Đặc biệt là khi ghép các đoạn mã lại với nhau từ nhiều mẫu khác nhau, mã của bạn thường trở nên lộn xộn (e. g. , thụt lề không nhất quán, lượng khoảng trắng khác nhau, v.v. ). Các IDE thường cung cấp các cách để thụt lề hoặc bỏ thụt lề các khối mã. Trong Notepad ++, điều này có thể được thực hiện bằng cách đánh dấu mã thụt lề không chính xác và nhấn Tab hoặc Shift-Tab tương ứng. Tuy nhiên, cũng có các công cụ làm đẹp có sẵn cả trực tuyến và trong IDE có thể sửa nhiều loại lỗi trên toàn bộ tài liệu trong vài giây

Đây là một phiên bản lộn xộn của mã Hello_Map JS

require([
    "esri/Map",
    "esri/views/MapView"
], (Map, MapView) => {

const map = new Map({
    basemap: "streets"
});


                const view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 4,
            center: [15, 65]
        });

});

Mã này, mặc dù hoàn toàn hợp lệ như trình duyệt nhìn thấy, nhưng mọi người rất khó đọc do thụt đầu dòng không nhất quán và khối khoảng trắng lớn

1. Trỏ trình duyệt của bạn tới jsbeautifier. tổ chức
2. Sao chép mã lộn xộn ở trên và dán mã vào hộp văn bản lớn trên trang web jsbeautifier
3. Nhấp vào nút Làm đẹp JavaScript hoặc HTML ở trên hoặc dưới hộp văn bản (hoặc nhấn Ctrl-Enter). thì đấy. Sự lộn xộn của mã này được dọn sạch

Có một số cài đặt ở phía trên bên phải của trang mà bạn có thể sử dụng để điều chỉnh cách trình làm đẹp sắp xếp mã của bạn. Bốn danh sách thả xuống đầu tiên có lẽ được quan tâm nhiều nhất

• Cái đầu tiên cho phép bạn chỉ định số lượng khoảng trắng bạn muốn thụt lề (hoặc sử dụng 1 tab thay thế). Cách tốt nhất là sử dụng tab hoặc dấu cách, nhưng không kết hợp cả hai trong cùng một tài liệu. Các nhà phát triển thường có ý kiến ​​​​mạnh mẽ trong không gian so với. cuộc tranh luận tab. Tôi nghiêng về việc sử dụng khoảng trắng vì khoảng trắng chiếm một ký tự bất kể ứng dụng bạn đang sử dụng để xem mã là gì, trong khi một tab có thể được hiển thị rộng 2, 4 hoặc 8 ký tự tùy thuộc vào ứng dụng
• Danh sách thứ hai liên quan đến lượng khoảng trắng bạn muốn xuất hiện giữa các khối mã (e. g. , giữa hai hàm, sau một vòng lặp hoặc biểu thức điều kiện, hoặc như trong trường hợp này, giữa định nghĩa của hai biến đối tượng)
• Danh sách thứ ba cho phép bạn chỉ định độ rộng tối đa của mã trước khi mã được chuyển sang dòng tiếp theo
• Danh sách thứ tư liên quan đến việc định vị các niềng răng. Một số nhà phát triển (bao gồm cả tôi) thích định vị dấu ngoặc mở đi kèm với hàm tạo đối tượng hoặc hàm trên cùng một dòng với “câu lệnh điều khiển” của nó. Những người khác thích nẹp được đặt trên đường riêng của nó

Tôi khuyến khích bạn thử nghiệm với các tùy chọn này để xem chúng ảnh hưởng như thế nào đến định dạng mã của bạn

Cũng như các công cụ linting, đôi khi IDE bao gồm một công cụ làm đẹp tích hợp hoặc có thể có một công cụ được thêm vào dưới dạng plugin. Công cụ duy nhất mà tôi biết cho Notepad++ là JSToolNpp. Tôi sẽ không hướng dẫn bạn cách sử dụng công cụ này vì tôi không quan tâm đến cách nó định dạng các định nghĩa đối tượng. Ví dụ, nó định dạng một đối tượng như thế này

const map = new Map({
        basemap: "streets"
    });

trong khi tôi muốn nó được định dạng như thế này

const map = new Map({
    basemap: "streets"
});

Tuy nhiên, bạn có thể cài đặt và chơi với công cụ nếu muốn

Cuối cùng, bạn nên lưu ý rằng CodePen cung cấp một công cụ làm đẹp trên menu thả xuống của bảng soạn thảo JS (Định dạng JavaScript).  

Trong hướng dẫn này, bạn sẽ học cách xác thực mã HTML của mình để đảm bảo rằng mã HTML của bạn tuân theo các tiêu chuẩn web hiện tại và không có lỗi

Tại sao phải xác thực mã HTML của bạn

Là người mới bắt đầu, bạn thường mắc lỗi khi viết mã HTML của mình. Mã không chính xác hoặc không chuẩn có thể gây ra kết quả không mong muốn về cách trang của bạn hiển thị hoặc hoạt động trong trình duyệt

Để ngăn chặn điều này, bạn có thể kiểm tra hoặc xác thực mã HTML của mình theo các nguyên tắc và tiêu chuẩn chính thức do Wide Web Consortium (W3C) đặt ra cho các trang web HTML/XHTML

World Wide Web Consortium cung cấp một công cụ trực tuyến đơn giản (https. // trình xác thực. w3. org/) tự động kiểm tra mã HTML của bạn và chỉ ra bất kỳ sự cố/lỗi nào mà mã của bạn có thể mắc phải, chẳng hạn như thiếu thẻ đóng hoặc thiếu dấu ngoặc kép quanh các thuộc tính

Xác thực một trang web

Xác thực một trang web là một quá trình đảm bảo rằng nó tuân thủ các quy tắc hoặc tiêu chuẩn được xác định bởi World Wide Web Consortium (W3C), cơ quan duy trì các tiêu chuẩn HTML

Có một số lý do cụ thể để xác thực một trang web, một số trong số đó là

• Nó giúp tạo các trang web tương thích với nhiều trình duyệt, đa nền tảng. Nó cũng có khả năng tương thích với phiên bản tương lai của trình duyệt web và tiêu chuẩn web
• Các trang web tuân thủ các tiêu chuẩn làm tăng khả năng hiển thị của trình thu thập thông tin và trình thu thập dữ liệu của công cụ tìm kiếm, do đó các trang web của bạn sẽ có nhiều khả năng xuất hiện hơn trong kết quả tìm kiếm
• Nó sẽ giảm các lỗi không mong muốn và làm cho các trang web của bạn dễ truy cập hơn đối với khách truy cập

Ghi chú. Xác nhận là quan trọng. Nó sẽ đảm bảo rằng các trang web của bạn được giải thích theo cùng một cách (theo cách bạn muốn) bởi các trình duyệt web, công cụ tìm kiếm khác nhau, v.v.

Theo liên kết được cung cấp bên dưới để xác thực tài liệu HTML/XHTML của bạn. Nó sẽ tự động phát hiện xem bạn đang sử dụng HTML hay XHTML và bạn đang sử dụng loại tài liệu nào

Các lỗi trong HTML là gì?

Có lỗi cú pháp trong HTML không?