Kiểm tra phần tử VKontakte. Đánh giá các công cụ dành cho nhà phát triển trong các trình duyệt khác nhau. Cách xem mã của một thành phần trên một trang

Ctrl+U

Làm cách nào để xem mã nguồn của một phần tử?

Nhấp chuột phải vào thành phần trang quan tâm.

Google Chrome: “Xem mã phần tử”

Opera: "Kiểm tra nguyên tố"

FireFox: “Phân tích phần tử”

Trong các trình duyệt khác, hãy tìm mục menu có ý nghĩa tương tự.

Chào mọi người!

Tôi đặc biệt trình bày toàn bộ quan điểm ở đầu bài viết, dành cho những ai đang tìm kiếm câu trả lời nhanh chóng.

Thông tin này có thể được nhiều người biết đến, nhưng vì tôi đang viết cho những người mới bắt đầu viết blog, lập trình viên web và những người tìm kiếm khác nên bài viết tham khảo này là một tài liệu cần phải có.

Trong tương lai, bạn chắc chắn sẽ nghiên cứu mã nguồn của các trang và các thành phần riêng lẻ.

Hãy xem một ví dụ cụ thể về cách bạn có thể sử dụng việc xem mã nguồn của một trang.

Ví dụ: chúng tôi muốn xem những từ khóa nào được sử dụng cho một trang cụ thể. Chúng ta truy cập trang web mà chúng ta quan tâm và nhấn Ctrl+U. Mã nguồn của trang này sẽ mở trong một cửa sổ riêng hoặc trong một tab riêng. Nhấn Ctrl+F để tìm kiếm một đoạn mã. Trong trường hợp này, chúng ta gõ từ “ từ khóa". Bạn sẽ tự động được chuyển hướng đến một đoạn mã có thẻ meta này và từ được tìm kiếm sẽ được đánh dấu.

Bằng cách tương tự, bạn có thể tìm kiếm và nghiên cứu các đoạn mã khác.

Việc xem toàn bộ mã nguồn của một trang trong hầu hết các trường hợp không thuận tiện lắm, vì vậy trong tất cả các trình duyệt, bạn có thể xem mã của một phần tử hoặc đoạn riêng lẻ.

Hãy sử dụng một ví dụ cụ thể về việc xem mã của một phần tử. Ví dụ: hãy xem liệu liên kết có thuộc tính nofollow hay không. Nhấp chuột phải vào liên kết mà chúng tôi quan tâm và trong menu ngữ cảnh thả xuống, nhấp chuột trái vào mục “Xem mã phần tử” hoặc tương tự (tùy thuộc vào trình duyệt của bạn). Dưới đây, trong một cửa sổ đặc biệt để phân tích mã, chúng tôi nhận được kết quả tương tự.

Chúng ta thấy mã liên kết có chứa rel=”nofollow” . Điều này có nghĩa PR sẽ không bị “rò rỉ” qua link này. Chúng ta sẽ nói về điều này chi tiết hơn trong các bài viết sau. Bây giờ điều quan trọng là bây giờ bạn đã biết cách xem mã nguồn của trang và mã nguồn của một phần tử riêng lẻ.

3,7 trên 5

Xin chào. Hôm nay tôi muốn nói về việc bổ sung trình duyệt cần thiết cho mọi nhà phát triển web. Mọi người đều biết đến FireBug - tiện ích bổ sung mạnh mẽ và tiện lợi nhất dành cho FireFox.

Nhưng Firebug không thể giúp bạn bất cứ điều gì khi làm việc với IE, Opera hoặc Safari.

Vì vậy, trong chương trình nghị sự:

FireBug cho Firefox;
Thanh công cụ dành cho nhà phát triển web dành cho Firefox;
Thanh công cụ dành cho nhà phát triển IE;
DebugBar cho IE;
DragonFly cho Opera;
WebThanh tra cho Safari;
Công cụ dành cho nhà phát triển dành cho Google Chrome.

Tất nhiên, có những người khác - tôi chắc chắn sẽ đề cập đến chúng.

Bọ lửa cho Firefox

Tôi không biết chắc liệu firebug có phải là tổ tiên của các công cụ khác dành cho nhà phát triển hay không, nhưng nó chắc chắn là công cụ phổ biến, tiện lợi và nhiều chức năng nhất.

Firebug là một tiện ích bổ sung dành cho Firefox, có nghĩa là bạn cần tải xuống từ trang web tiện ích bổ sung của Firefox và cài đặt nó.

Để kích hoạt firebug, chỉ cần nhấn F12.

Các tính năng của tiện ích bổ sung này:

Kiểm tra và chỉnh sửa thay đổi năng động HTML;
Chỉnh sửa CSS nhanh chóng;
Gỡ lỗi JavaScript, dòng lệnh để thực thi tập lệnh;
Giám sát các yêu cầu mạng - bạn có thể xem kích thước và thời gian tải xuống của tệp và tập lệnh, tiêu đề yêu cầu;
Trình phân tích cú pháp DOM.

Bạn có thể nói rất lâu về những khả năng này một cách chi tiết, nhưng tôi nghĩ rằng tất cả độc giả của chúng tôi đều biết chúng, và nếu không, thông tin chi tiết có trên trang chủ Firebug hoặc điều tương tự trong bản dịch của Ilya Kantor.

Ngoài bản thân con bọ lửa, bạn có thể cần một tiện ích bổ sung hữu ích cho nó - FireCookie, với tiện ích này (ngạc nhiên :-) bạn có thể xem và thay đổi cookie.

Thanh công cụ dành cho nhà phát triển web dành cho Firefox

Một bổ sung hữu ích khác cho Ognelis. Nó trông như thế này:

Chúng ta hãy nhìn vào nó từng điểm một.

Vô hiệu hóa
Cho phép bạn tắt javascript, vô hiệu hóa việc sử dụng bộ đệm, điều này rất hữu ích trong quá trình phát triển (cho phép bạn chắc chắn rằng trang đã tải các bản cập nhật mới nhất), hủy các màu được sử dụng trên trang và thay thế chúng bằng màu tiêu chuẩn , vô hiệu hóa việc gửi tiêu đề người giới thiệu (trang mà quá trình chuyển đổi được thực hiện) ).

Bánh quy
Một tùy chọn hữu ích để làm việc với cookie: bạn có thể xem, xóa, từ chối và thêm chúng.

CSS
Menu này lưu trữ tính năng thú vị nhất của Thanh công cụ dành cho nhà phát triển - chỉnh sửa CSS nhanh chóng. Ngoài ra, có thể xem css, tắt, v.v., v.v. Theo tôi, sự hiện diện của các phím tắt ở đây rất hữu ích (ví dụ: CTRL+SHIFT+C cho phép bạn truy cập trực tiếp vào xem kiểu trang)

Các hình thức
Mọi thứ để làm việc với biểu mẫu: hiển thị mật khẩu, hiển thị thông tin về biểu mẫu, chuyển đổi phương thức biểu mẫu (GET -> POST và ngược lại) và hơn thế nữa. Một chức năng hữu ích là “Điền các trường biểu mẫu” để tự động điền vào các trường biểu mẫu (ví dụ: khi kiểm tra một trang web, khi chức năng ghi nhớ mật khẩu trong FF bị tắt. Nếu không, tôi không thấy điều gì hữu ích trong mục này.

Hình ảnh
Có một chức năng hữu ích để tắt hình ảnh - để xem trang web của bạn trông như thế nào khi không có hình ảnh. Bạn có thể khoanh tròn hình ảnh, hiển thị kích thước của chúng và hiển thị thuộc tính alt.

Thông tin
Có rất nhiều lựa chọn trong menu này. Chức năng hiển thị thuộc tính lớp và id trên trang có thể hữu ích. Ngoài ra, mục "Xem thông tin màu sắc" rất thú vị - để nhanh chóng lấy thông tin về màu sắc được sử dụng trên trang. “Xem kích thước tài liệu”—xem kích thước trang. “Xem tiêu đề phản hồi” - xem tiêu đề trang.

Điều khoản khác
Chức năng được sử dụng thường xuyên nhất là xóa bộ nhớ đệm. Ngoài ra, các chức năng có sẵn ở đây là “Thước trang” - thước kẻ, “Kính lúp trang” - kính lúp và “Hướng dẫn đường” - một số dòng có thể hữu ích để cắt bớt mẫu.

Đề cương
Làm nổi bật các thành phần trang khác nhau - bảng, tiêu đề, liên kết, khung, khối. Thay đổi kích thước
Cho phép bạn thay đổi kích thước cửa sổ trình duyệt để phù hợp với mọi tiện ích mở rộng màn hình tiêu chuẩn. Công cụ
Các tính năng để xác thực trang được lưu trữ ở đây. Cả địa phương và bên ngoài. Truy cập thuận tiện và nhanh chóng để xác thực HTML, CSS, v.v. Để xác thực HTML, bạn có thể sử dụng phím tắt CTRL+SHIFT+H.

Xem nguồn
Xem mã nguồn. Khả năng xem trong một ứng dụng bên ngoài, xem mã được tạo.

Mình thích nhất cái ở góc bên phải. Nó là một trình xác thực HTML, CSS và chỉ báo lỗi JS nhanh. Nếu không có vấn đề gì, biểu tượng sẽ có màu xanh lá cây và nếu có vấn đề, biểu tượng sẽ có màu đỏ.

Thanh công cụ dành cho nhà phát triển Internet Explorer

Tất nhiên, về ngoại hình, thanh công cụ này trông giống như một con bọ lửa, nhưng than ôi, nó vẫn chưa trưởng thành như vậy. Mặt khác, mặc dù nó có một số khả năng mà con bọ lửa không có. Tôi sẽ gọi Thanh công cụ dành cho nhà phát triển IE là một loại kết hợp giữa Thanh công cụ dành cho nhà phát triển web Firebug và FF.

Giống như firebug, có thể kiểm tra một phần tử chỉ bằng một cú nhấp chuột đơn giản. Tuy nhiên, nếu trong FF chúng ta có thể thấy ngay phần đệm và lề thì ở đây không có cơ hội như vậy.

Ngoài ra, Thanh công cụ dành cho nhà phát triển IE không cập nhật động cây phần tử như Firebug. Nghĩa là, nếu chúng ta thay đổi bất kỳ thứ gì trên trang bằng js, chúng ta sẽ không thấy bất cứ thứ gì bằng thanh công cụ này.

Những gì bạn có thể tận hưởng là khả năng thay đổi CSS nhanh chóng (một cách dễ dàng để tìm ra thứ cần hack :), khả năng vô hiệu hóa CSS và hình ảnh, khả năng xóa nhanh bộ nhớ đệm và chơi với cookie, truy cập nhanh để xác thực.

Phần hay nhất: có một bộ chọn màu tích hợp, cho phép bạn lấy bất kỳ màu nào từ trang bằng pipet. (có plugin ColorZilla riêng cho ff).

DebugBar cho IE

Một phần mở rộng thú vị theo đúng nghĩa của nó. Được cài đặt dưới dạng bảng bổ sung cho trình duyệt:

Vì lý do nào đó, có một công cụ tìm kiếm tích hợp, một công cụ nhỏ mắt, khả năng thay đổi kích thước của cửa sổ và một lần nữa, vì lý do nào đó, khả năng gửi một trang cho bạn bè để lấy xà phòng. Mặc dù điều này có thể hữu ích. Nhưng tôi đã không thể tận dụng được cơ hội này =(.
Ngoài ra còn có thanh tra:

Các nhà phát triển không hài lòng với phương pháp kiểm tra bằng cách nhấp hoặc trỏ: họ đã nghĩ ra một điều thú vị hơn. Trong DebugBar, bạn cần kéo hình chữ thập vào phần tử mong muốn để nhìn thấy nó trên cây.
Không có khả năng chỉnh sửa CSS. Nhưng có một trình xác thực và bảng điều khiển js tích hợp.

Và nếu bạn đi sâu vào cài đặt, bạn có thể tìm thấy điều này:

Vừa buồn cười vừa buồn cười.
Được biết, Developer Toolbar sẽ được tích hợp vào Explorer thứ tám. Nó sẽ tương tự như mô tả trong đoạn thứ ba, nhưng chúng tôi hy vọng rằng nó sẽ tốt hơn.

DragonFly cho Opera

DragonFly được tích hợp sẵn vào Opera bắt đầu từ phiên bản 9.5 nên không cần phải cài đặt. Để kích hoạt Dragonfly, hãy đi tới Công cụ → Nâng cao → Công cụ dành cho nhà phát triển. Và nếu bằng tiếng Anh thì Công cụ → Nâng cao → Công cụ dành cho nhà phát triển.
Tôi sẽ cảnh báo ngay với bạn rằng DragonFly đang ở giai đoạn Alpha2, điều này giải thích nhiều trục trặc của nó.

Danh sách tính năng:

Thanh tra DOM;
Kiểm tra bằng cách nhấp chuột (một lần nữa, chúng ta sẽ không thấy vết lõm như trong FF);
Chỉnh sửa CSS;
Truy cập nhanh vào bảng điều khiển lỗi.

DF giống như một trang riêng biệt trong một khung. Nếu bạn mở nó, nó sẽ mở cho tất cả các tab (không giống như firebug). Do đó, trước khi kiểm tra một phần tử, chúng ta phải chọn từ danh sách trang mà chúng ta muốn xem.
Thật không may, ở đây, cũng như trong Thanh công cụ dành cho nhà phát triển IE, các phần tử được tạo động không được hiển thị. Và nói chung, khi chúng tôi kiểm tra trang, không có js nào được khởi chạy: các liên kết và nút không được nhấp vào. Hãy hy vọng chúng ta sẽ thấy tất cả các tính năng này khi DragonFly đến gần ngày phát hành.

Trình kiểm tra web trong Safari

Để bật mục “Phát triển” trong menu Safari, bạn cần bật mục tương ứng trong cài đặt (tab “Nâng cao”):

Trong menu “Phát triển”, chúng tôi có sẵn các chức năng sau:

Chúng ta hãy xem xét kỹ hơn về trình kiểm tra web:

Theo mặc định, trình kiểm tra mở ở chế độ xem HTML. Nhưng nó có thể được chuyển sang chế độ xem DOM. Với mục đích này, có một công tắc ở tấm trên cùng. Khi bạn di chuột qua một phần tử trong trình kiểm tra, phần tử đó sẽ được đánh dấu trên chính trang đó. Bạn không thể thấy phần đệm, thay đổi đánh dấu hoặc CSS một cách nhanh chóng hoặc xem các thay đổi động trong DOMe một cách nhanh chóng như bạn có thể làm trong FireBug. Nhưng phải thừa nhận là nó trông rất dễ thương.

Nếu bạn muốn làm việc với thanh tra trong cửa sổ trình duyệt, bạn có thể nhấp vào nút ở góc dưới bên trái.

Ngay cả trong Safari, một chức năng như “Dòng thời gian mạng” cũng khả dụng (nút “Mạng” trong trình kiểm tra):

Bạn có thể thấy rõ thời điểm và thời gian tải tập tin xuống. Bạn cũng có thể xem tiêu đề yêu cầu, nhưng thật không may, bạn không thể xem chính nội dung đó.

Tất cả mọi thứ dành cho nhà phát triển trong Google Chrome

Lame được sinh ra ở dạng tiên tiến và ngay lập tức nó có, mặc dù hiện tại còn chưa ổn, nhưng vẫn là công cụ dành cho các nhà phát triển.

Thanh tra DOM;
Trình gỡ lỗi JS;
Bảng điều khiển JS.

Để kiểm tra bất kỳ phần tử nào, bạn cần nhấp chuột phải vào phần tử đó và chọn “Xem mã phần tử” trong menu ngữ cảnh.

Tất nhiên, có những người khác - tôi chắc chắn sẽ đề cập đến chúng.

Bọ lửa cho Firefox

Tôi không biết chắc chắn liệu đó có phải là con bọ lửa Là tổ tiên của các công cụ dành cho nhà phát triển khác, nhưng nó chắc chắn là công cụ phổ biến, tiện lợi và nhiều chức năng nhất trong .

Firebug là một tiện ích bổ sung dành cho Firefox, có nghĩa là bạn cần tải xuống từ trang web tiện ích bổ sung của Firefox và cài đặt nó.

Để kích hoạt firebug, chỉ cần nhấn F12.

Các tính năng của tiện ích bổ sung này:

Kiểm tra và chỉnh sửa HTML thay đổi linh hoạt;
Chỉnh sửa CSS nhanh chóng;
Gỡ lỗi JavaScript, dòng lệnh để thực thi tập lệnh;
Giám sát các yêu cầu mạng - bạn có thể xem kích thước và thời gian tải xuống của tệp và tập lệnh, tiêu đề yêu cầu;
Trình phân tích cú pháp DOM.

Ngoài bản thân con bọ lửa, bạn có thể cần một tiện ích bổ sung hữu ích cho nó - lửabánh quy, nhờ đó (ngạc nhiên:-) bạn có thể xem và thay đổi cookie.

Thanh công cụ dành cho nhà phát triển WEB dành cho Firefox

Một bổ sung hữu ích khác cho Ognelis. Nó trông như thế này:

Chúng ta hãy nhìn vào nó từng điểm một.

Vô hiệu hóa

Cho phép bạn tắt JavaScript, vô hiệu hóa việc sử dụng bộ đệm, điều này rất hữu ích trong quá trình phát triển (cho phép bạn chắc chắn rằng trang đã tải các bản cập nhật mới nhất), hủy các màu được sử dụng trên trang và thay thế chúng bằng màu tiêu chuẩn , vô hiệu hóa việc gửi tiêu đề người giới thiệu (trang mà từ đó người giới thiệu được thực hiện) ).

Bánh quy

Một tùy chọn hữu ích để làm việc với cookie: bạn có thể xem, xóa, từ chối và thêm chúng.

CSS

Menu này lưu trữ tính năng thú vị nhất của Thanh công cụ dành cho nhà phát triển - chỉnh sửa CSS một cách nhanh chóng. Ngoài ra, có thể xem css, tắt, v.v. Theo tôi, sự hiện diện của các phím tắt ở đây rất hữu ích (ví dụ: CTRL+SHIFT+C cho phép bạn truy cập trực tiếp vào xem kiểu trang)

Các hình thức

Mọi thứ để làm việc với biểu mẫu: hiển thị mật khẩu, hiển thị thông tin về biểu mẫu, chuyển đổi phương thức biểu mẫu (GET » POST và ngược lại) và hơn thế nữa. Một chức năng hữu ích là “Điền các trường biểu mẫu” để tự động điền vào các trường biểu mẫu (ví dụ: khi kiểm tra một trang web, khi chức năng ghi nhớ mật khẩu bị tắt. Nếu không, tôi không thấy điều gì hữu ích trong mục này.

Hình ảnh

Có một tính năng hữu ích để tắt hình ảnh - để xem trang web của bạn trông như thế nào khi không có hình ảnh. Bạn có thể khoanh tròn hình ảnh, hiển thị kích thước của chúng và hiển thị thuộc tính alt.

Thông tin

Có rất nhiều lựa chọn trong menu này. Chức năng hiển thị thuộc tính lớp và id trên trang có thể hữu ích. Ngoài ra, mục "Xem thông tin màu sắc" rất thú vị - để nhanh chóng có được thông tin về màu sắc được sử dụng trên trang. “Xem kích thước tài liệu” - xem kích thước trang. “Xem tiêu đề phản hồi” - xem tiêu đề trang.

Điều khoản khác

Chức năng được sử dụng thường xuyên nhất là xóa bộ nhớ đệm. Ngoài ra, còn có các chức năng sau: “Thước trang” - thước kẻ, “Kính lúp trang” - kính lúp và “Hướng dẫn đường” - một số dòng có thể hữu ích để cắt bớt mẫu.

Đề cương

Làm nổi bật các thành phần trang khác nhau - bảng, tiêu đề, liên kết, khung, khối. Thay đổi kích thước cho phép bạn thay đổi kích thước cửa sổ trình duyệt để phù hợp với mọi tiện ích mở rộng màn hình tiêu chuẩn. Các tính năng công cụ để xác thực trang được lưu trữ ở đây. Cả địa phương và bên ngoài. Truy cập thuận tiện và nhanh chóng để xác thực HTML, CSS, v.v. Để xác thực HTML, bạn có thể sử dụng phím tắt CTRL+SHIFT+H.

Xem nguồn

Xem mã nguồn. Khả năng xem trong một ứng dụng bên ngoài, xem mã được tạo.

Mình thích nhất cái ở góc bên phải. Nó là một trình xác thực HTML, CSS và chỉ báo lỗi JavaScript nhanh. Nếu không có vấn đề gì, biểu tượng sẽ có màu xanh lá cây và nếu có vấn đề, biểu tượng sẽ có màu đỏ.

Thanh công cụ dành cho nhà phát triển Internet Explorer

Bắt đầu từ phiên bản 8.0, tính năng gỡ lỗi đã được tích hợp sẵn trong trình duyệt này. Nó có thể được gọi dễ dàng Phím F12. Đúng là nó kém như một chương trình từ những năm 90.

Nhưng có một công cụ thú vị hơn nhiều dành cho trình duyệt này, được gọi là Thanh công cụ dành cho nhà phát triển Internet Explorer, có thể tải xuống từ liên kết.

Tất nhiên, về ngoại hình, thanh công cụ này trông giống như một con bọ lửa, nhưng than ôi, nó vẫn chưa trưởng thành như vậy. Mặt khác, mặc dù nó có một số khả năng mà con bọ lửa không có. Tôi gọi Thanh công cụ dành cho nhà phát triển Internet Explorer là một loại kết hợp giữa Firebug và Nhà phát triển WEB FireFox Thanh công cụ.

Giống như firebug, có thể kiểm tra một phần tử chỉ bằng một cú nhấp chuột đơn giản. Tuy nhiên, nếu chúng ta có thể nhìn thấy ngay phần đệm và lề thì ở đây không có cơ hội như vậy.

Ngoài ra, Thanh công cụ dành cho nhà phát triển Internet Explorer không cập nhật động cây phần tử như Firebug. Nghĩa là, nếu chúng ta thay đổi bất kỳ thứ gì trên trang bằng js, chúng ta sẽ không thấy bất cứ thứ gì bằng thanh công cụ này.

Những gì bạn có thể tận hưởng là thay đổi CSS một cách nhanh chóng (một cách dễ dàng để tìm ra nội dung cần hack :), khả năng vô hiệu hóa CSS và hình ảnh, khả năng xóa nhanh bộ nhớ đệm và sử dụng cookie, truy cập nhanh để xác thực.

Phần hay nhất: có một bộ chọn màu tích hợp, cho phép bạn lấy bất kỳ màu nào từ trang bằng pipet. (có plugin ColorZilla riêng cho ff).

Gỡ lỗi DebugBar cho Internet Explorer

Có thể tải xuống DebugBar cho Internet Explorer từ liên kết đã cho.

Một phần mở rộng thú vị theo đúng nghĩa của nó. Được cài đặt dưới dạng bảng bổ sung cho trình duyệt:

Ngoài ra còn có thanh tra:

Các nhà phát triển không hài lòng với phương pháp kiểm tra bằng cách nhấp hoặc trỏ: họ đã nghĩ ra một điều thú vị hơn. Trong DebugBar, bạn cần kéo hình chữ thập vào phần tử mong muốn để nhìn thấy nó trên cây. Không có khả năng chỉnh sửa CSS. Nhưng có một trình xác thực và bảng điều khiển js tích hợp.

Và nếu bạn đi sâu vào cài đặt, bạn có thể tìm thấy điều này:

Vừa buồn cười vừa buồn cười.

Được biết, Developer Toolbar sẽ được tích hợp vào Explorer thứ tám. Nó sẽ tương tự như mô tả trong đoạn thứ ba, nhưng chúng tôi hy vọng rằng nó sẽ tốt hơn.

Gỡ lỗi DragonFly cho Opera

Tôi sẽ cảnh báo ngay với bạn rằng DragonFly đang ở giai đoạn Alpha2, điều này giải thích nhiều trục trặc của nó.

Danh sách tính năng:

Thanh tra DOM;
Kiểm tra bằng cách nhấp chuột (một lần nữa, chúng ta sẽ không thấy vết lõm như trong FireFox);
Chỉnh sửa;
Truy cập nhanh vào bảng điều khiển lỗi.

Thật không may, ở đây, cũng như trong Thanh công cụ Dav của Internet Explorer, các phần tử được tạo động không được hiển thị. Và nói chung, khi chúng tôi kiểm tra trang, không có JavaScript nào được khởi chạy: các liên kết và nút không được nhấp vào. Hãy hy vọng chúng ta sẽ thấy tất cả các tính năng này khi DragonFly đến gần ngày phát hành.

Gỡ lỗi Trình kiểm tra WEB trong Safari

Tôi sẽ nói ngay rằng đó là về trình duyệt Cuộc đi săn Tôi bỏ sót thông tin nên không chịu trách nhiệm về tính đầy đủ của tài liệu như người ta nói.

Để bật mục “Phát triển” trong menu Safari, bạn cần bật mục tương ứng trong cài đặt (tab “Nâng cao”):

Trong menu “Phát triển”, chúng tôi có sẵn các chức năng sau:

Chúng ta hãy xem xét kỹ hơn về trình kiểm tra WEB:

Nếu bạn muốn làm việc với thanh tra trong cửa sổ trình duyệt, bạn có thể nhấp vào nút ở góc dưới bên trái.

Ngay cả trong Safari, một chức năng như “Dòng thời gian mạng” cũng khả dụng (nút “Mạng” trong trình kiểm tra):

Gỡ lỗi dành cho nhà phát triển trong Google Chrome

Lame được sinh ra ở dạng tiên tiến và ngay lập tức nó có, mặc dù hiện tại còn chưa ổn, nhưng vẫn là công cụ dành cho các nhà phát triển.

Thanh tra DOM;
trình gỡ lỗi javascript;
Bảng điều khiển JavaScript.

Để kiểm tra bất kỳ phần tử nào, bạn cần nhấp chuột phải vào phần tử đó và chọn “Xem mã phần tử” trong menu ngữ cảnh:

Chức năng này giống như trong Safari: các phần tử được đánh dấu khi di chuột nhưng không thể chỉnh sửa CSS và HTML và các thay đổi trong DOM không được theo dõi. Nhưng nút ở góc dưới bên trái, nút gắn thanh tra vào cửa sổ trình duyệt, không hoạt động.

Trong tab “Tài nguyên”, chúng ta có thể thấy những điều sau:

Hơi khác so với quy mô ở safari. Màu trong suốt trong sơ đồ này hiển thị kích thước tệp tương đối và màu đầy đủ hiển thị thời gian tải. Bằng cách này hay cách khác, rõ ràng là phần này của Chrome vẫn chưa hoàn thiện.

Trong bài viết này, tôi đã xem xét các phần mở rộng và tích hợp sẵn của trình duyệt nổi tiếng nhất.

Có những người khác, ví dụ:

Trình trợ giúp phát triển WEB Internet Explorer - một trợ lý tốt cho các nhà phát triển ASP.NET (Internet Explorer);
Thanh công cụ dành cho nhà phát triển WEB - thanh công cụ dành cho Internet Explorer và FireFox. Có một số tính năng hữu ích;
Thanh công cụ trợ năng WEB - thanh công cụ dành cho Internet Explorer. Không có gì thú vị.

Nếu có những tiện ích bổ sung mà tôi chưa đề cập đến nhưng đáng lẽ phải có hoặc có những chức năng dành cho những tiện ích mở rộng đã đề cập mà tôi đã bỏ sót, vui lòng viết thư.

Hãy tận hưởng nó vì sức khỏe của bạn!

Các nhà phát triển trình duyệt đã quan tâm đến sự thuận tiện của những người tạo trang web mở trong cùng các trình duyệt này, cụ thể là quản trị viên web. Họ đã thêm các công cụ dành cho nhà phát triển vào các tính năng tiêu chuẩn mà bạn có thể dễ dàng mở và sử dụng. xem mã nguồn của trang web trong trình duyệt: HTML, CSS, JavaScript (JS), thu thập nhiều dữ liệu hữu ích khác nhau về cấu trúc của trang web, tiến hành phân tích kỹ thuật của trang web. Nói chung thấy rất nhiều điều bổ ích.

Tất nhiên, những công cụ này không chỉ được sử dụng bởi những người tạo trang web cho công việc mà còn cả những người dùng thông thường, những người mà mã nguồn cho phép họ xem nhiều dữ liệu hữu ích khác nhau.

Từ bài viết này, bạn sẽ tìm hiểu cách xem mã nguồn của một trang web trong trình duyệt (cách mở mã HTML, CSS, JavaScript của một trang web).

Cách mở mã nguồn của trang trong trình duyệt

Có hai cách để mở mã nguồn của trang web trong trình duyệt:

Sử dụng phím nóng;
Mở từ menu ngữ cảnh.

Ctrl+U– tổ hợp phím nóng để xem mã nguồn của toàn bộ trang trong một cửa sổ mới riêng biệt. Chuẩn cho mọi trình duyệt: Google Chrome, Opera, Mozilla Firefox, trình duyệt Yandex, IE.

Bạn cũng có thể nhập các công cụ dành cho nhà phát triển như sau:

Để nhanh chóng tìm thấy mã, từ hoặc văn bản mong muốn trên một trang, bạn có thể sử dụng tổ hợp phím nóng tìm kiếm tiêu chuẩn cho tất cả các trình duyệt: Ctrl + G.

Video hướng dẫn:

Xem mã phần tử | khám phá yếu tố | kiểm tra nguyên tố

Nếu bạn đột nhiên không cần xem toàn bộ mã nguồn mà chỉ hiển thị một phần riêng biệt của nó, một phần nào đó trên trang, thì công cụ trước đó sẽ không hoạt động. Với mục đích này, các công cụ dành cho nhà phát triển có một chức năng khác, chức năng này sẽ được thảo luận bên dưới.

Cách xem mã của một thành phần trên một trang:

Bạn cũng có thể sử dụng phím tắt để truy cập nhanh vào quá trình kiểm tra phần tử.

Phím nóng (nút):

Google Chrome: Ctrl+Shift+I và Ctrl+Shift+C

Opera: Ctrl+Shift+I và Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I và Ctrl+Shift+C

Trình duyệt Yandex: Ctrl+Shift+I và Ctrl+Shift+C

Sau các bước này, mã nguồn của trang web sẽ mở trong cùng cửa sổ trình duyệt:

Tất cả mã HTML sẽ nằm ở cột lớn bên trái. Và các kiểu CSS ở bên phải.

Tất nhiên, ưu điểm của phương pháp này là người dùng có cơ hội thay đổi mã nguồn và chỉnh sửa kiểu. Nghĩa là, bạn có thể chỉnh sửa các kiểu trên trang web và xem nó trông như thế nào với một số kiểu nhất định mà không cần phải thực hiện thay đổi ngay lập tức đối với các tệp nằm trên máy chủ lưu trữ. Để thay đổi hoặc thêm mã chương trình, bạn cần nhấp đúp vào đoạn hoặc vùng mong muốn. Tất nhiên, việc sửa mã trong trình duyệt sẽ không được thực hiện trên máy chủ lưu trữ. Vì vậy, trong tương lai, trong mọi trường hợp, bạn sẽ phải sao chép mã này và ghi vào tệp.

Hướng dẫn bằng video này mô tả chi tiết và chỉ ra cách làm việc với các công cụ dành cho nhà phát triển:

Cứ như vậy, chỉ cần trực tuyến, ngay trên trình duyệt, bạn có thể xem mã nguồn của trang web, lấy dữ liệu cơ bản về mã HTML và CSS, thay đổi và sao chép chúng mà không cần phải tải file của trang web này về máy tính .

Nhân tiện, những người dùng Internet thiếu kinh nghiệm đã thay đổi mã trang và mong nó được lưu lại sẽ thất vọng. Rốt cuộc, sau khi làm mới trang, mọi thay đổi trên đó sẽ biến mất. Điều này là không đủ để hack trang web :)

Cách xem mã nguồn trên điện thoại Android

Tôi cũng muốn lưu ý rằng các công cụ dành cho nhà phát triển không chỉ có sẵn trong phiên bản trình duyệt dành cho máy tính để bàn, tức là trên máy tính và máy tính xách tay. Trên điện thoại và máy tính bảng (Android, iOS), bạn cũng có thể xem mã nguồn.

Để thực hiện việc này, hãy thêm tiền tố nguồn xem vào URL của trang đang được kiểm tra:

Ví dụ:

nguồn xem:https://site/turbo-rezhim-opera/

Lưu ý: Phiên bản thích ứng của trang web được kích hoạt, phiên bản này tự động thích ứng với kích thước nhỏ của trình duyệt của bạn và ẩn một số chi tiết của trang web để dễ đọc. Thích xem!

Xin chào các độc giả blog thân yêu Địa điểm TRÊN! Trong bài viết này, chúng ta sẽ thảo luận về những điều mà tôi không thể tưởng tượng được là có thể thành công nếu không có nó, chúng ta sẽ nói về các bộ công cụ dành cho nhà phát triển web đầy đủ chức năng như Mozilla Firefox với plugin của nó con bọ lửa và các thanh tra web tương tự. Vì tôi thích sử dụng trình duyệt Opera để lướt Internet hơn nên trong bài viết này tôi sẽ tập trung cụ thể vào, nhưng điều quan trọng nhất đối với bạn là tìm hiểu xem những công cụ như vậy có tồn tại không, có khá nhiều và chúng tồn tại cho mọi trình duyệt, và do đó sẽ là tội lỗi nếu không sử dụng chúng.

Để xem chi tiết (kiểm tra) một phần tử trên trang, bạn cần nhấp chuột phải (nhấp chuột phải) và chọn một trong các mục sau từ menu thả xuống: “kiểm tra phần tử” (Opera); “kiểm tra phần tử” hoặc tốt hơn là “kiểm tra phần tử bằng Firebug” (Firefox); "xem mã phần tử" (Chrome). Phím nóng để gọi thanh tra tại Opera: Ctrl + Shift + tôi.

Bạn sẽ thấy một cái gì đó như thế này:

Vì vậy, chúng ta có trước vũ khí bố trí mạnh mẽ nhất mà chúng ta có thể xem và nhờ tính rõ ràng của nó, hiểu cách thức và điều gì phù hợp với chúng ta. Chúng tôi có thể xem mã CSS và JavaScript cũng như thay đổi chúng một cách nhanh chóng! Vâng, các độc giả thân mến, một trong những tính năng thú vị nhất của việc kiểm tra các yếu tố là chúng tôi có thể, có thể nói, chỉnh sửa bất kỳ trang web nào “trực tuyến” và xem điều gì sẽ xảy ra nếu các nhà phát triển làm điều này ở đây và theo cách đó ở đây. Chúng ta có thể kết nối, ngắt kết nối hoặc thay đổi cái này cái kia, chạy JavaScript, thậm chí thêm văn bản của riêng mình vào giữa bài viết của người khác và những thứ tương tự, tất nhiên, tất cả những điều này chỉ chúng ta mới nhìn thấy được.

Nhờ tính năng kiểm tra thành phần tích hợp sẵn, việc tìm hiểu các khía cạnh thực tế của bố cục trang web có thể trở thành một trò chơi thực sự đối với bạn. Do đó, cá nhân tôi rất thường xuyên xem xét các hình nền ban đầu của trang web mà tôi thích (các hình ảnh có trong thuộc tính nền CSS) và cũng xem xét tất cả chi tiết về bố cục của một trang web cụ thể để tìm hiểu các kỹ thuật mới, trong đó Tôi khuyên bạn cũng nên làm như vậy.

Opera Dragonfly cung cấp tính năng giám sát lưu lượng mạng, nhật ký lỗi, bảng điều khiển tích hợp, làm nổi bật mã và thành phần thông minh trên trang, trình gỡ lỗi JavaScript, xem tài nguyên trang và hơn thế nữa.

Tôi khuyên bạn nên xem video ngắn và hay này về trình kiểm tra web tích hợp từ Opera -:

Điều đáng chú ý là Opera Dragonfly ban đầu được tích hợp vào mọi phiên bản Opera và được cập nhật tự động mà không cần thông báo hay sự tham gia của bạn.

Tôi cũng muốn trình diễn một tính năng thú vị của trình kiểm tra web Mozilla Firefox tích hợp sẵn là xem 3D, điều này thực sự làm tôi hài lòng:

Điều quan trọng nhất mà bạn lẽ ra phải học và hiểu về việc kiểm tra các thành phần trang mà tôi đã viết ở trên, phần còn lại, theo ý kiến của tôi, là vấn đề thực hành chứ không phải lý thuyết, vì vậy đó là tất cả cho ngày hôm nay, cảm ơn bạn đã quan tâm, thành công phát triển trang web!