Thực đơn
trang chủSự cố

Bảng điều khiển dành cho nhà phát triển Google Chrome: mười tính hữu ích không rõ ràng. Tạo kiểu cho các công cụ dành cho nhà phát triển trong Google Chrome

  • Dịch

Ngày nay Google Chrome là trình duyệt phổ biến nhất trong số các nhà phát triển web. Với chu kỳ phát hành nhanh trong sáu tuần và bộ công cụ mạnh mẽ dành cho nhà phát triển ngày càng mở rộng, trình duyệt đã trở thành một công cụ bắt buộc phải có. Hầu hết các bạn có thể quen thuộc với nhiều tính năng của nó, chẳng hạn như chỉnh sửa CSS trực tiếp bằng bảng điều khiển và trình gỡ lỗi. Trong bài viết này, chúng ta sẽ xem xét 15 mẹo và thủ thuật thú vị giúp cải thiện năng suất của bạn hơn nữa.

1. Thay đổi file nhanh chóng

Nếu bạn đã sử dụng Sublime Text thì có lẽ bạn không thể sống thiếu "Go to Anything" ( Ghi chú của người dịch:Đối với người dùng Idea, tính năng này được gọi là "Tìm kiếm mọi nơi" và được truy cập bằng cách nhấp đúp vào phím Shift). Bạn sẽ rất vui khi biết rằng có một tính năng tương tự trong các công cụ dành cho nhà phát triển. Nhấn Ctrl + P (Cmd + P đối với người dùng Mac) trong khi Bảng điều khiển dành cho nhà phát triển đang mở để nhanh chóng tìm và mở bất kỳ tệp nào trong dự án của bạn.

2. Tìm kiếm trong mã nguồn

Nhưng nếu bạn muốn tìm kiếm trong mã nguồn thì sao? Để tìm kiếm tất cả các file đã tải xuống trên một trang, nhấn Ctrl + Shift + F (Cmd + Opt + F). Phương pháp tìm kiếm này cũng hỗ trợ tìm kiếm biểu thức chính quy.

3. Đi đến dòng

Khi bạn đã mở một tệp trong tab Nguồn, các công cụ dành cho nhà phát triển sẽ cho phép bạn chuyển đến bất kỳ dòng nào trong tệp đó. Để thực hiện việc này, nhấn Ctrl + G đối với Windows và Linux (hoặc Cmd + L đối với Mac) và nhập số dòng.

Một cách khác là nhấn Ctrl + O, nhưng thay vì nhập văn bản tìm kiếm, hãy nhập :// và số dòng ( Ghi chú của người dịch: hoặc bạn có thể đi xa hơn nữa và nhập tên tệp và số dòng bằng cách sử dụng :///làm dấu phân cách giữa chúng, trong khi nhập toàn bộ tên tệp là không cần thiết, đây là một tìm kiếm).

4. Tìm nạp các phần tử DOM bằng bảng điều khiển

Bảng điều khiển Công cụ dành cho nhà phát triển hỗ trợ một số hàm và biến ma thuật hữu ích để tìm nạp DOM:
  • $() - tương đương với document.querySelector(). Trả về phần tử đầu tiên khớp với bộ chọn CSS, ví dụ $("DIV") sẽ trả về phần tử DIV đầu tiên trên trang.
  • $$() - tương đương với document.querySelectorAll(). Trả về danh sách các phần tử ( Ghi chú của người dịch: cụ thể là NodeList) khớp với bộ chọn CSS đã cho.
  • $0 - $4 là lịch sử của năm thành phần DOM cuối cùng mà bạn đã chọn trong tab Thành phần, trong đó $0 sẽ là thành phần cuối cùng.

Bạn có thể tìm hiểu thêm các chức năng của bảng điều khiển.

5. Sử dụng nhiều dấu mũ và vùng chọn

Khi chỉnh sửa một tệp, bạn có thể đặt nhiều dấu mũ bằng cách giữ Ctrl (Cmd dành cho Mac) và nhấp vào nơi bạn muốn, như vậy bạn có thể đặt dấu mũ ở nhiều nơi cùng một lúc.

6. Bảo quản nhật ký

Bằng cách bật tùy chọn Preserve Log trên tab Console, kết quả sẽ được lưu thay vì bị xóa mỗi khi trang được tải. Điều này thuận tiện nếu bạn muốn xem lịch sử lỗi xuất hiện trước khi rời khỏi trang.

(Ghi chú của người dịch: một thuộc tính tương tự có sẵn trên tab Mạng. Khi được bật, lịch sử truy vấn không còn bị xóa khi chuyển giữa các trang. Tuy nhiên, nếu một trang đã được chuyển hướng bằng JavaScript và bất kỳ yêu cầu nào khác đã được thực hiện thì hầu như không thể xem được kết quả của yêu cầu đó. Đừng quên tắt các thuộc tính như vậy khi gỡ lỗi trong thời gian dài! Các công cụ dành cho nhà phát triển hầu như luôn tiêu tốn nhiều tài nguyên hệ thống hơn chính trang đó!)

7. Làm mịn các nguồn đã được rút gọn

Công cụ dành cho nhà phát triển của Chrome có tính năng "tăng cường" mã nguồn được rút gọn tích hợp thành dạng dễ đọc hơn. Nút này nằm ở góc dưới bên trái của tệp hiện đang mở trong tab Nguồn.

(Ghi chú của người dịch:đôi khi việc kích hoạt thuộc tính này một cách tự động là không đủ, ví dụ như nó được thực hiện trong FireFox)

8. Chế độ thiết bị

Các công cụ dành cho nhà phát triển bao gồm một chế độ mạnh mẽ để phát triển các trang được tối ưu hóa cho thiết bị di động. Video này của Google thể hiện hầu hết các tính năng nâng cao của nó, chẳng hạn như thay đổi độ phân giải màn hình, mô phỏng các thao tác chạm trên màn hình cảm ứng và mô phỏng các kết nối mạng chất lượng thấp.

9. Giả lập cảm biến thiết bị

Một tính năng thú vị khác của Chế độ thiết bị là khả năng mô phỏng các cảm biến của thiết bị di động như màn hình cảm ứng và gia tốc kế. Bạn thậm chí có thể nhập tọa độ địa lý của mình. Đối tượng nằm ở cuối tab Thành phần trong Mô phỏng -> Cảm biến.

10. Lựa chọn màu sắc

Khi chọn màu trong trình chỉnh sửa kiểu, bạn có thể nhấp vào mẫu màu và cửa sổ chọn màu sẽ xuất hiện. Khi cửa sổ này mở, con trỏ chuột của bạn sẽ biến thành kính lúp để chọn màu trên trang với độ chính xác đến từng pixel.

11. Trạng thái phần tử cưỡng bức

Các công cụ phát triển cho phép bạn mô phỏng các trạng thái thành phần CSS DOM như:hover và:focus, giúp việc viết kiểu cho chúng dễ dàng hơn. Tính năng này có sẵn trong CSS Property Editor.

12. Hiển thị bóng DOM

Trình duyệt tạo các phần tử như trường nhập và nút từ các phần tử cơ bản khác thường bị ẩn. Tuy nhiên, bạn có thể đi tới Cài đặt -> Chung và bật Hiển thị bóng tối tác nhân người dùng DOM để hiển thị các thành phần cơ bản này trong tab Thành phần. Điều này sẽ cho bạn cơ hội để thiết kế chúng một cách riêng biệt.

13. Chọn lần xuất hiện tiếp theo

Nếu bạn nhấn Ctrl + D (Cmd + D) trong khi chỉnh sửa tệp trong tab Nguồn, lần xuất hiện tiếp theo của từ hiện tại sẽ được đánh dấu thêm, cho phép bạn chỉnh sửa chúng đồng thời.

14. Thay đổi định dạng màu

Bằng cách Shift + Click vào mẫu màu, trong bảng chỉnh sửa CSS định dạng màu sẽ được đổi thành RGBA, HSL hexadecimal ( Ghi chú của người dịch:đồng thời, cả dạng viết tắt thập lục phân và dạng đầy đủ, thậm chí cả dạng viết hoa. Nếu điều này không phù hợp với bạn, trình duyệt sẽ cố gắng tìm màu này trong danh sách các hằng số màu tiêu chuẩn. Hạn chế duy nhất của tính năng này là để chọn định dạng mong muốn, bạn thường phải “nhấp chuột” qua tất cả các tùy chọn có thể khác).

15. Chỉnh sửa các tập tin cục bộ trong không gian làm việc

Không gian làm việc là một công cụ mạnh mẽ trong Bảng điều khiển dành cho nhà phát triển giúp biến các công cụ dành cho nhà phát triển thành IDE. Không gian làm việc chứa cấu trúc tệp trong tab Nguồn khớp với cấu trúc dự án cục bộ của bạn, do đó, giờ đây bạn có thể chỉnh sửa và lưu trực tiếp mà không cần phải sao chép và dán các thay đổi vào trình soạn thảo văn bản bên ngoài.

Để định cấu hình không gian làm việc, hãy chuyển đến tab Nguồn ( Ghi chú của người dịch: bật bảng điều hướng nếu nó bị ẩn, để thực hiện việc này, hãy nhấp vào nút Hiển thị điều hướng ở góc trên bên trái của tab) và nhấp chuột phải vào bất kỳ vị trí nào trong bảng điều hướng hoặc chỉ cần kéo toàn bộ tab dự án vào bảng điều khiển dành cho nhà phát triển. Bây giờ, thư mục đã chọn, các thư mục con của nó và tất cả các tệp trong đó sẽ có sẵn để chỉnh sửa cho dù bạn đang ở trang nào. Để thuận tiện hơn nữa, bạn có thể sử dụng các tệp được sử dụng trên trang này, điều này sẽ cho phép bạn chỉnh sửa và lưu chúng.

CẬP NHẬT. Ghi chú của người dịch:

Thư mục đã thêm sẽ có sẵn trên tất cả các tab. Do đó, nếu dự án của bạn có nhiều tệp HTML thì chỉ cần mở tệp đó trong tab trình duyệt tiếp theo là đủ.

Bạn có thể tìm hiểu thêm về không gian làm việc

Tìm hiểu xem Chrome DevTools có thể làm gì cho bạn và tìm hiểu cách sử dụng hết tiềm năng của chúng.

Trong số tất cả các ngành lập trình máy tính, phát triển web chắc chắn có rào cản gia nhập thấp nhất. Hầu hết mọi thứ bạn cần để tạo một trang web đơn giản đều là Notepad và trình duyệt.

Tuy nhiên, khi bố cục ngày càng phức tạp, việc theo dõi những thay đổi về mã trang trong Notepad thông thường càng trở nên khó khăn hơn. Bản thân tôi biết rằng một nhà phát triển web mới vào nghề có thể dành hơn một giờ chỉ để cố gắng tìm một quy tắc trong biểu định kiểu để thay đổi giao diện của phần tử này hoặc phần tử kia...

Tất nhiên, bạn có thể tìm kiếm một cách ngẫu nhiên, nhưng các chuyên gia đã được dạy bằng kinh nghiệm cay đắng không dựa vào sự cảnh giác của họ. Họ chỉ sử dụng những cái đặc biệt Những công cụ phát triển, được tích hợp trong hầu hết các trình duyệt và cho phép bạn nhanh chóng kiểm tra mã và kiểm tra một số tùy chọn nhất định cho hoạt động của nó.

Một loại công cụ tương tự đã xuất hiện trong Internet Explorer. Opera cũ đã sử dụng bảng điều khiển Dragonfly cho những mục đích này và thậm chí còn có tính năng tương tự Notepad tích hợp sẵn với tính năng tô sáng mã, giúp bạn có thể nhập trực tiếp vào môi trường trình duyệt:

Ngày nay, họ đã loại bỏ cách làm này và cung cấp cho các trình duyệt web các trình kiểm tra mã đặc biệt. Các trình duyệt dựa trên công cụ Chrome và cụ thể hơn là Google Chrome, có thể tự hào về các công cụ dành cho nhà phát triển chức năng nhất. Hãy xem xét mọi thứ bằng ví dụ của anh ấy.

Gọi các công cụ dành cho nhà phát triển và lượt xem trang

Bạn có thể gọi các công cụ dành cho nhà phát triển trong Chrome theo nhiều cách:

  1. Từ menu chính. Nhấp vào nút menu (ba dấu chấm ở góc trên bên phải của cửa sổ trình duyệt), di chuột qua danh sách thả xuống "Thêm công cụ" và bấm vào mục "Những công cụ phát triển".
  2. Phím nóng. Bạn có thể nhấn nút để gọi F12 hoặc kết hợp CTRL+SHIFT+I.
  3. Từ menu ngữ cảnh(thuận tiện nhất để kiểm tra các thành phần trang cụ thể). Nhấp chuột phải vào đối tượng mong muốn trên trang web và chọn "Xem mã"(hoặc "Kiểm tra phần tử" trong một số phiên bản Chrome cũ hơn).

Thanh công cụ dành cho nhà phát triển là một tập hợp các tab chứa các mô-đun chức năng nhất định cũng như các nút điều khiển và cấu hình. Điều đầu tiên bạn nên chú ý đến là các nút chung. Ở bên trái, bạn có thể tìm thấy nút chọn thành phần trang và nút chọn chế độ xem trang:

Chúng tôi vẫn sẽ nghiên cứu hành vi của cách thứ nhất, nhưng đối với cách thứ hai, nó cho phép bạn mô phỏng cách hiển thị của trang web trên màn hình của một trong các thiết bị di động có sẵn (ví dụ: iPhone) hoặc trên màn hình của một thiết bị di động. độ phân giải nhất định tính bằng pixel. Tất cả những gì bạn cần làm là nhấn nó và chọn thiết bị mong muốn:

Ngoài ra còn có một số nút và chỉ báo ở phía bên phải. Các chỉ báo hiển thị số lỗi (màu đỏ) và cảnh báo (màu vàng) trong hoạt động của tập lệnh. Nút chính ở đây có thể được gọi là trình đơn cài đặt. Nó cho phép bạn thay đổi liên kết của bảng điều khiển với khung của trang, cũng như bật và tắt các tab bổ sung bằng các công cụ (phần "Công cụ khác"). Theo mặc định, nó nằm ở cuối trang đang được kiểm tra, nhưng nó cũng có thể được đặt sang một bên hoặc thậm chí được gắn vào một cửa sổ riêng:

Menu cũng có phần "Cài đặt", cho phép truy cập vào nhiều cài đặt công cụ dành cho nhà phát triển. Nhưng trước hết, bạn khó có thể cần đến chúng, vì vậy chỉ cần biết về chúng là đủ. Và chúng ta sẽ xem xét các tab chính có chức năng hữu ích.

Tab yếu tố

Theo mặc định, Chrome DevTools mở trong một tab "Yếu tố". Đây là một trong những tab hữu ích nhất vì nó cho phép bạn xem và thay đổi nhanh chóng mã HTML và CSS của các thành phần khác nhau của trang web. Để chọn một phần tử, chỉ cần kích hoạt nút đầu tiên ở phía bên trái của bảng điều khiển (“Chọn một phần tử trong trang để kiểm tra nó”) và trỏ con trỏ chuột vào đoạn trang mong muốn. Trên chính trang đó, lựa chọn và kích thước khối tính bằng pixel sẽ được hiển thị xung quanh phần tử đã chọn và trong tab “Phần tử”, mã HTML sẽ mở rộng thành một dòng mô tả đoạn đã chọn:

Sau khi chọn một phần tử, chúng ta có thể chỉnh sửa nó và các kiểu liên kết với nó khi cần. Ví dụ: chúng tôi muốn thay đổi văn bản và giao diện của khối “đám mây” bằng các cụm từ của Frida trên trang web của chúng tôi. Để thực hiện việc này, hãy chọn khối đó và xem nội dung của nó:

Như bạn có thể thấy, bên trong nó có ba khối với các bản sao khác nhau và một tập lệnh chuyển đổi các bản sao này sau một khoảng thời gian nhất định. Để viết nội dung nào đó của riêng mình, chúng ta có thể dừng tập lệnh và viết văn bản của mình vào một trong các khối (có thể chỉnh sửa HTML sau khi nhấp đúp vào phần tử). Mặc dù vậy, tại sao lại lãng phí thời gian vào những chuyện vặt vãnh? Chúng ta có thể loại bỏ tất cả các khối không cần thiết, chỉ để lại một khối (đồng thời có thể phá hủy tập lệnh :)):

Vì vậy, chúng tôi đã thay đổi văn bản trong khối, nhưng nó trông hơi nhỏ... Chúng tôi cần hiển thị quy mô “tội ác” của mình ngay từ cái nhìn đầu tiên :) Và đây là chức năng chỉnh sửa kiểu, có sẵn trong phần bổ sung của tab “Thành phần”, sẽ giúp chúng tôi . Chọn khối mong muốn trong mã và bằng cách nhấp đúp vào bảng điều khiển bên cạnh, bạn có thể chỉnh sửa các kiểu đã tồn tại hoặc thêm kiểu mới. Bằng cách này bạn có thể đạt được kết quả rất đáng chú ý :)

Xin lưu ý rằng tất cả các thành phần mà chúng tôi thêm vào bảng kiểu sẽ tự động được đăng ký dưới dạng kiểu nội tuyến (tham số của thuộc tính "style") của khối mã HTML đã chọn. Hơn nữa, mỗi trong số chúng có thể bị vô hiệu hóa nhanh chóng bằng cách bỏ chọn hộp kiểm bên trái (trong mã, tham số bị vô hiệu hóa sẽ tự động bị xóa dưới dạng nhận xét).

Và, có lẽ, điều hữu ích nhất là đối với mỗi bộ chọn có mô tả về kiểu sẽ có một liên kết chính xác đến dòng mà nó thực sự được viết trong tệp CSS. Điều này cho phép bạn mở tệp và thực hiện các chỉnh sửa cần thiết ở một vị trí đã biết thay vì tìm kiếm thủ công! Nghĩa là, bạn có thể sử dụng các công cụ dành cho nhà phát triển trên tab "Thành phần" để nhập và đánh giá sơ bộ chỉnh sửa tạm thời mã số ( tất cả các chỉnh sửa sẽ biến mất sau khi tải lại trang) tiếp theo là giới thiệu những thay đổi thành công nhất đối với mã một cách liên tục.

Cuối cùng, điều đáng lưu ý là bảng chỉnh sửa kiểu có một số tab riêng, trong đó “Styles” chỉ là tab đầu tiên. Dưới đây là các phần bổ sung ở đó:

  • Đã tính toán- hiển thị mô hình của khối đã chọn và các kiểu được tính toán tự động cho nó, không được chỉ định rõ ràng hoặc được kế thừa từ các khối cha;
  • Người nghe sự kiện- hiển thị danh sách các chức năng “nghe” các sự kiện nhất định cho toàn bộ trang hoặc một khối được chọn cụ thể (bạn cần bỏ chọn hộp này;
  • Điểm dừng DOM- chứa cái gọi là “điểm ngắt” DOM (viết tắt tiếng Anh là “Mô hình đối tượng tài liệu”), có thể được tạo từ menu ngữ cảnh của mã HTML (nhóm “Break on”) khi sửa đổi nó để hủy/áp dụng nhanh các thay đổi đã thực hiện ;
  • Của cải- cho phép bạn xem danh sách đầy đủ các thuộc tính JavaScript cho khối đã chọn trên trang;
  • Khả năng tiếp cận- hiển thị mức độ lồng nhau theo thứ bậc của khối đã chọn mà không tính đến các loại khối, lớp, mã định danh hoặc các đặc điểm khác của chúng.

Sự hiện diện của tất cả các công cụ bổ sung này không bắt buộc bạn phải sử dụng chúng. Thông thường, khả năng chỉnh sửa mã HTML và CSS là đủ. Tuy nhiên, nếu bạn cần làm việc với JavaScript thì danh sách nghe, điểm dừng DOM và thuộc tính khối có thể rất hữu ích cho bạn!

Bảng điều khiển

Vì đang nói về JavaScript nên chúng ta không thể không nhắc đến một công cụ được tích hợp trong Chrome DevTools có tên là console. Bạn có thể tìm thấy nó trên một trang riêng Tab "Bảng điều khiển" và theo mặc định, nó cũng được hiển thị dưới dạng bảng dưới cùng bổ sung trên tất cả các tab khác (bạn có thể tắt màn hình trong cài đặt bằng cách chọn "Ẩn ngăn kéo bảng điều khiển" hoặc nhấn nút ESC):

Bảng điều khiển có thể thực hiện hai chức năng cùng một lúc: giám sát sự kiện trên trang hiển thị các cảnh báo và lỗi, cũng như thực hiện các lệnh JavaScriptđược người dùng nhập vào. Chức năng đầu tiên được thực hiện rõ ràng. Trong đầu ra của bảng điều khiển, tất cả các sự kiện được nhóm thành ba loại với các màu nền khác nhau:

  1. Trắng- “loại trực tiếp” về các sự kiện đã hoàn thành thành công.
  2. Màu vàng- cảnh báo về các lỗi và hư hỏng không nghiêm trọng có thể xảy ra.
  3. Màu đỏ- lỗi khi thực thi tập lệnh hoặc khi truy cập một số tài nguyên được yêu cầu.

Các lỗi và cảnh báo chứa mô tả ngắn gọn về sự cố cũng như liên kết đến tệp và dòng trong đó gây ra sự cố. Biết chính xác vị trí của sự cố (giả sử nó xảy ra trong một tệp trên máy chủ của bạn), bạn có thể nhanh chóng bản địa hóa và sửa lỗi.

Đối với việc thực thi mã tùy chỉnh, tính năng này được sử dụng rất thường xuyên để nhanh chóng gỡ lỗi mã và tiến hành các thử nghiệm khác nhau với JavaScript. Ví dụ: khi học ngôn ngữ này, không phải lúc nào bạn cũng cần một Notepad riêng hoặc thậm chí là một môi trường phát triển chính thức. Bạn có thể thực thi các tập lệnh đơn giản trực tiếp trong bảng điều khiển (đặc biệt vì nó hỗ trợ hoàn thành lệnh).

Để lập trình bảng điều khiển, tốt nhất bạn nên mở một trang nội bộ không tồn tại trong Chrome (ví dụ: chrome://blank/) hoặc một tab trống mới (chrome://newtab/). Điều này sẽ tránh sự chồng chéo trong việc thực thi các tập lệnh đã chạy trên trang. Trên thực tế, chỉ có vậy - chúng ta có thể viết mã trong bảng điều khiển và thực thi nó bằng cách nhấn Enter. Điều duy nhất bạn cần nhớ là đối với đầu ra, thay vì "document.write("");" truyền thống, cấu trúc "console.log("");" được sử dụng. Đây là ví dụ cơ bản nhất để hiển thị chuỗi văn bản:

console.log("Văn bản đầu tiên của tôi xuất ra trong bảng điều khiển Chrome :))");

Bảng điều khiển hỗ trợ một số công cụ xác định cho phép bạn xác định rõ ràng loại đầu ra (chuỗi/số/phần tử DOM/đối tượng JavaScript), thực hiện thay thế dữ liệu của loại được chỉ định hoặc áp dụng định dạng:

Dưới đây là một số ví dụ về việc sử dụng công cụ xác định:

*** Ví dụ 1 ***

console.log("Tôi đang đếm đến năm: %d, %d, %d, %d, %d \n%s", 1, 2, 3, 4, 5, "Tôi đi xem! ");

*** Ví dụ 2 ***

console.log("%cĐiều này sẽ được viết bằng chữ lớn màu đỏ trên nền xanh", "color: #f00; font-size: 30px; nền: #00f; đệm:10px; font-weight:bold");

*** Ví dụ 3 ***

var curDate = ngày mới();
var day = curDate.getDate();
var tháng = curDate.getMonth();
var mảng = [
"Tháng Giêng",
"Tháng 2",
"Bước đều",
"Tháng tư",
"Có thể",
"Tháng sáu",
"Tháng bảy",
"Tháng tám",
"Tháng 9",
"Tháng mười một",
"Tháng 12",
];
console.log("%cToday: %s - %d number", "color: cam; cỡ chữ: 30px; nền: xanh; phần đệm: 20px", arr, day);

Như bạn có thể thấy, bảng điều khiển có thể được sử dụng thành công không chỉ để kiểm tra mã hiện có mà còn là môi trường để học JavaScript. Nó hỗ trợ cả biểu thức một dòng và các cấu trúc nhiều dòng phức tạp hơn với các biến, mảng và vòng lặp. Để nạp một dòng trong bảng điều khiển, thay vì Enter, bạn cần nhấn SHIFT+ENTER và để nạp dòng trong kết quả đầu ra, hãy sử dụng ký tự nạp dòng - "\n".

Tab nguồn

Thoạt nhìn, mục đích của tab thứ ba của công cụ dành cho nhà phát triển "Nguồn" không hoàn toàn rõ ràng. Theo mặc định, ở giữa không gian làm việc, mã nguồn của trang cũng được mở ở đây, vì lý do nào đó nên không thể chỉnh sửa được. Có hai bảng ở hai bên: “Trang” (trái) và “Chủ đề” (phải). Và chính bảng điều khiển bên trái là “sự giàu có” chính của tab “Nguồn”!

Bảng điều khiển này cho phép bạn xem tất cả các tài nguyên được tải cùng với trang. Hình ảnh, tập lệnh, biểu định kiểu - tất cả những thứ này có thể được chọn và xem trong khu vực làm việc (và tập lệnh cũng có thể được chỉnh sửa):

Ngoài việc xem tài nguyên và chỉnh sửa JavaScript (nhân tiện, bạn có thể sử dụng các công cụ từ bảng bên phải), tab "Nguồn" cho phép bạn tải bất kỳ tệp nào xuống máy tính của mình. Tính năng này có thể được sử dụng để tải xuống, chẳng hạn như ảnh từ Instagram và các tài nguyên web khác không thể lưu hình ảnh trực tiếp! Chỉ cần mở công cụ dành cho nhà phát triển, tìm kiếm những hình ảnh cần thiết trong danh sách tài nguyên rồi lưu chúng:

Tương tự, bạn có thể tải xuống, chẳng hạn như phông chữ yêu thích, đồ họa SVG và các tài nguyên tương tự, tính năng lưu trực tiếp có thể không khả dụng.

Công cụ kiểm tra và kiểm toán

Có thể nói, ba tab được thảo luận ở trên là những tab chính trong các công cụ phát triển. Thành phần và số lượng các thành phần khác có thể thay đổi theo từng phiên bản của Google Chrome (chẳng hạn như xảy ra với tab “Bộ nhớ”, tab này xuất hiện và biến mất). Ngoài ra, số lượng tab có thể tăng lên do các tiện ích mở rộng được cài đặt có thêm thanh công cụ riêng.

Hiện tại, phiên bản hiện tại của Google Chrome là nhánh thứ 69 được cập nhật gần đây. Do đó, chúng tôi sẽ xem xét các tab bổ sung bằng cách sử dụng ví dụ của nó.

tab mạng

Tab "Mạng" cho phép bạn xem số liệu thống kê tải cho tất cả các thành phần của trang web được kiểm tra, cũng như giám sát các yêu cầu được gửi bởi trang web trong quá trình hoạt động. Để bắt đầu theo dõi, bạn cần nhấp vào nút ghi ở bên trái tab và tải lại trang (F5). Bạn có thể dừng ghi bất kỳ lúc nào, tuy nhiên, nên thực hiện việc này sau khi trang đã tải đầy đủ tất cả các tài nguyên cần thiết:

Các kết quả thu được có thể được nghiên cứu bằng cách sử dụng tính năng lọc sự kiện theo loại dữ liệu được truyền, theo kích thước, thời gian tải, v.v. Ngoài ra, bạn có thể mô phỏng tải một trang có giới hạn tốc độ nhân tạo tương ứng với một số mạng di động nhất định (danh sách thả xuống "Trực tuyến"). Tất cả điều này có thể được sử dụng để xác định các tệp “nặng” nhất và tối ưu hóa việc tải chúng (hoặc loại bỏ chúng hoàn toàn) để tiết kiệm lưu lượng truy cập và tăng tốc trang web của bạn.

Tab hiệu suất

Nếu tab trước cho phép chúng tôi theo dõi hoạt động mạng thuần túy của trang, thì “Hiệu suất”, hoạt động theo các nguyên tắc tương tự (ghi lại hành động), cho phép chúng tôi đánh giá loại tải mà tài nguyên web tạo ra trên máy tính của người dùng. Để có đủ lượng dữ liệu để phân tích, việc ghi lại hoạt động của trang trong một phút là đủ, sau đó chúng tôi dừng lại và xem kết quả:

Biểu đồ có nhãn nhiều màu cho phép bạn xem quy trình nào chiếm nhiều thời gian và tài nguyên máy tính nhất trong toàn bộ quá trình quét. Và bạn có thể tóm tắt dữ liệu thu được bằng cách xem biểu đồ hình tròn bên dưới, hiển thị tổng thời gian thử nghiệm cũng như tỷ lệ phần trăm dành cho việc chạy tập lệnh, hiển thị các thành phần trang, vẽ hình ảnh, tải các thành phần khác (ví dụ: tập lệnh của bên thứ ba ) và thời gian ngừng hoạt động. Tất cả dữ liệu này cũng có thể được sử dụng để tối ưu hóa các trang web.

Thẻ bộ nhớ

Một trong những tab không nhất quán nhất trong Google DevTools, tab này thường xuyên biến mất. Nó có thể hoạt động ở hai chế độ. Theo mặc định, nó hiển thị bản tóm tắt mức tiêu thụ bộ nhớ hiện tại của trang đang mở. Nếu bạn cần một báo cáo chi tiết, bạn có thể bắt đầu quá trình ghi tương tự như trên các tab trước. Kết quả bạn sẽ nhận được dữ liệu về tất cả các tiến trình tiêu tốn RAM của máy tính:

Điều thú vị là mức tiêu thụ bộ nhớ không chỉ được hiển thị bởi chính trang, tập lệnh và tài nguyên được tải mà còn bởi các tiện ích mở rộng của Chrome hiện đang hoạt động! Điều này có thể hữu ích trong trường hợp trình duyệt trở nên rất chậm do “phát triển quá mức” với các plugin không cần thiết. Biết được những “kẻ ăn” tài nguyên chính, bạn có thể xóa chúng, đưa Chrome của bạn trở lại trạng thái nhẹ nhàng trước đây.

Tab ứng dụng

Nếu bạn cần tìm hiểu những gì trang web lưu trữ trong phiên, cookie hoặc bộ nhớ cục bộ khác, hãy chuyển đến tab "Ứng dụng". Ở đây mọi thứ đều đơn giản nhất có thể - trong bảng điều khiển bên trái, chúng tôi chọn bộ lưu trữ dữ liệu mà chúng tôi quan tâm và trong khu vực chính, chúng tôi xem nội dung của nó. Và, điển hình là ở đây chúng ta có thể chỉnh sửa ngay nội dung này và thậm chí xóa nó hoàn toàn (nút “Xóa tất cả” và “Xóa đã chọn”):

Tab bảo mật

Giờ đây, việc sử dụng giao thức HTTPS an toàn trên các trang web đã trở nên gần như cần thiết. Để đánh giá hiệu suất của nó và những lỗ hổng tiềm ẩn trong bảo mật của trang web, bạn có thể sử dụng tab "Bảo mật". Tại đây, sau khi tải lại trang, chúng tôi sẽ thấy một báo cáo về các tài nguyên an toàn và nguy hiểm và theo đó, chúng tôi sẽ có thể thực hiện các biện pháp tiếp theo để loại bỏ những thiếu sót đã được xác định:

Tab kiểm tra

Cuối cùng, trên hết, Google Chrome có thể cung cấp cho chúng tôi các mẹo thiết thực để cải thiện hiệu suất của trang web. Để thực hiện việc này, hãy chuyển đến tab "Kiểm tra", bắt đầu thử nghiệm và đợi quá trình hoàn tất. Dựa trên kết quả kiểm tra, các biểu đồ và đề xuất cụ thể để tối ưu hóa trang hơn nữa sẽ được tạo:

kết luận

Google Chrome cung cấp cho người dùng một bộ công cụ dành cho nhà phát triển khá tốt. Nó có hầu hết mọi thứ bạn có thể cần để kiểm tra và tối ưu hóa các trang web. Bạn có thể tùy ý sử dụng các công cụ để chỉnh sửa mã HTML, quản lý kiểu và thậm chí kiểm soát hoàn toàn các tập lệnh. Ngoài ra, trong Chrome DevTools, bạn sẽ tìm thấy các công cụ để kiểm tra hiệu suất trang web, cho phép bạn xác định các cách để tối ưu hóa hơn nữa.

Và tất cả điều này không yêu cầu cài đặt bất kỳ chương trình hoặc tiện ích mở rộng bổ sung nào. Mặc dù vậy, một số tiện ích mở rộng có thể thêm các công cụ của riêng chúng vào kho vũ khí vốn đã phong phú của Chrome. Nếu bạn nắm vững ít nhất một nửa những gì DevTools cung cấp, bạn có thể tăng đáng kể năng suất của mình và cải thiện chất lượng trang web bạn tạo!

tái bút Được phép tự do sao chép và trích dẫn bài viết này, với điều kiện là phải chỉ ra một liên kết hoạt động mở tới nguồn và quyền tác giả của Ruslan Tertyshny được giữ nguyên.

Ngày 6 tháng 5 năm 2015 / Giao diện người dùng

Tạo kiểu cho các công cụ dành cho nhà phát triển trong Google Chrome

Gần đây tôi phát hiện ra rằng Chrome hỗ trợ các chủ đề cho công cụ dành cho nhà phát triển. Tôi ngay lập tức muốn thử điều này. Tôi sẽ nói ngay rằng tôi không hoàn toàn hài lòng với kết quả này :-)

Sự chuẩn bị

Để cài đặt chủ đề cho công cụ dành cho nhà phát triển, bạn cần kích hoạt các tính năng thử nghiệm. Để thực hiện việc này, hãy nhập chrome://flags/#enable-devtools-experiments vào thanh địa chỉ Google Chrome. Gần điểm Bật thử nghiệm Công cụ dành cho nhà phát triển nhấp chuột Cho phép. Bây giờ hãy khởi động lại trình duyệt của bạn (cần có một nút ở phía dưới).

Mở công cụ dành cho nhà phát triển (cmd + shift + i / F12), đi tới cài đặt (biểu tượng bánh răng), chuyển đến tab Thí nghiệm và chọn hộp bên cạnh “Cho phép chủ đề giao diện người dùng tùy chỉnh”.
Bây giờ bạn có thể cài đặt các chủ đề từ cửa hàng một cách an toàn.

Tìm và cài đặt chủ đề

Bạn có thể tìm thấy các chủ đề trong cửa hàng Google Chrome. Tìm kiếm chủ đề dành cho nhà phát triển. Nhưng điều này không thuận tiện lắm; hầu hết tất cả các chủ đề đều được thu thập trên trang web devthemez.com. Và còn có các chủ đề về công cụ dành cho nhà phát triển.

Bây giờ hãy vào cửa hàng, chọn chủ đề chúng ta cần và cài đặt nó. Bây giờ khi bạn mở Công cụ dành cho nhà phát triển, bạn sẽ thấy chủ đề của mình.

Bây giờ một chút về sự khó chịu. Chủ đề thường trông kém. Ngoài ra còn có một vấn đề với việc làm quen với nó. Ví dụ: tôi đã quen với thực tế là nếu số trong bảng điều khiển có màu xanh lam thì đó là Số và nếu có màu đỏ thì đó là Chuỗi. Nhưng mỗi chủ đề đều có màu sắc riêng và việc điều hướng chúng trở nên khó khăn hơn.

Trong những năm gần đây, trình duyệt Google Chrome đã trở nên phổ biến nhất đối với cả người dùng Internet thông thường và người dùng tham gia phát triển web.

Trong sáu tuần, Chrome đã trải qua một số bản phát hành chính và bản thân hệ thống này được cập nhật liên tục với các công cụ mới dành cho nhà phát triển, nhờ đó trình duyệt đã có được một hệ thống cài đặt rất linh hoạt. Nhiều người từ lâu đã quen thuộc với tất cả các chức năng của trình duyệt, chẳng hạn như chức năng chỉnh sửa CSS trực tiếp, sử dụng bảng điều khiển cũng như trình gỡ lỗi. Bài viết này nhằm mục đích trình bày 11 thủ thuật chính và các mẹo đáng giá có thể cải thiện mức hiệu suất của toàn bộ hệ thống và giúp làm việc với trình duyệt trở nên thoải mái nhất có thể.

Nếu bạn đã từng sử dụng tính năng Sublime Text thì có lẽ bạn luôn cần tùy chọn Go to Anything. Các nhà phát triển lưu ý rằng một chức năng tương tự dành cho những người tích cực sử dụng Idea có thể có tên khác - “Tìm kiếm ở mọi nơi” và bạn có thể gọi nó bằng cách nhấn phím “Shift” hai lần.

Tin vui là chức năng loại này có trong bộ công cụ dành cho nhà phát triển. Để kích hoạt nó, bạn cần giữ tổ hợp hai phím Ctrl và P (nếu bạn sử dụng Apple Mac, bạn sẽ phải giữ phím Cmd và P) trong khi PR hiện ra để bạn chú ý để nhanh chóng tìm kiếm và mở bất kỳ tệp nào trong dự án bạn đang sử dụng.

Thực hiện tìm kiếm trong mã loại nguồn

Tuy nhiên, nếu việc tìm kiếm cần được thực hiện trong mã loại nguồn thì sao? Để tìm kiếm trong từng tệp được tải xuống trên chính trang trình duyệt, bạn sẽ phải giữ ba phím: Ctrl, Shift và F - đối với hệ điều hành Windows; Cmd, Opt và F. Kỹ thuật tìm kiếm này có khả năng hỗ trợ tìm kiếm biểu thức chính quy.

Sau khi mở tệp bạn cần trong tab "Nguồn" đặc biệt, bộ công cụ dành cho nhà phát triển đầy đủ sẽ cho phép người dùng điều hướng đến một dòng hoàn toàn thuộc bất kỳ loại nào cho một tệp nhất định. Để thực hiện quy trình này, bạn sẽ phải giữ phím Ctrl và G – đối với phần mềm Windows; Cmd và L nếu bạn đang sử dụng Apple Mac. Sau đó, nhập số mà dòng có.

Bạn cũng có thể sử dụng thêm cách khác là nhấn tổ hợp 2 phím Ctrl và O, tuy nhiên, bạn sẽ không phải nhập văn bản để tìm kiếm mà nhập dấu hai chấm, sau đó là số mà dòng đó có. Người dùng cũng có thể thực hiện thủ tục này nhiều hơn nữa. Bạn cần nhập tên tệp cũng như số, sử dụng dấu hai chấm làm dấu phân chia giữa các giá trị riêng lẻ. Trong trường hợp này, tên tệp có thể được nhập bằng chữ viết tắt.

Tìm nạp các phần tử DOM khi sử dụng bảng điều khiển

Bảng điều khiển, chịu trách nhiệm về các công cụ dành cho nhà phát triển, có thể dễ dàng hỗ trợ một số chức năng hữu ích cũng như các biến để tìm nạp DOM:

  • tương đương với document.querySelector(). Có thể trả về phần tử đầu tiên khớp chính xác với dữ liệu bộ chọn CSS. Giả sử $(DIV) - có thể triển khai trả về phần tử DIV đầu tiên trực tiếp trong khu vực trang chính.
  • $$() là giá trị tương đương với document.querySelectorAll(). Tùy chọn có khả năng trả về toàn bộ danh sách có các phần tử (danh sách này được gọi là NodeList). Hầu hết mọi thành phần đều tuân thủ đầy đủ bộ chọn CSS.
  • $0-$4 - Các giá trị này lưu lại lịch sử của các phần tử DOM thuộc về năm phần tử cuối cùng. Bạn đã chọn chúng trong tab “Thành phần” đặc biệt và ở đây giá trị $0 xuất hiện dưới dạng giá trị gần đây nhất.

Cách sử dụng nhiều dấu mũ và vùng chọn

Trong khi chỉnh sửa tệp, bạn có cơ hội cài đặt các toa xe. Điều này có thể được thực hiện bằng cách giữ phím Ctrl và sau đó nhấp vào khu vực bạn cần. Xe ngựa có thể được lắp đặt cùng một lúc ở nhiều nơi.

Khi tham số này được kích hoạt trên tab bảng điều khiển, từng kết quả riêng lẻ sẽ được lưu. Dữ liệu sẽ không bị xóa vào lần tiếp theo bạn khởi chạy trang trong trình duyệt. Hệ thống như vậy mang lại rất nhiều thuận tiện khi làm việc với hệ thống, đặc biệt khi bạn cần kiểm tra toàn bộ lịch sử lỗi xảy ra trước khi bạn rời khỏi trang.

Cải thiện các nguồn đã được giảm thiểu

Công cụ dành cho nhà phát triển Chrome có một "công cụ cải tiến" tích hợp cho các mã nguồn đã được thu nhỏ để giúp chúng dễ đọc hơn. Bản thân nút này nằm ở phía dưới cùng bên trái của tệp hiện đang mở (tab “Nguồn” đặc biệt).

Cách sử dụng chế độ thiết bị

Bộ công cụ dành cho nhà phát triển có khả năng sử dụng chế độ mạnh mẽ, được thiết kế để hoạt động tạo các trang được tối ưu hóa cho điện thoại thông minh và máy tính bảng. Nếu bạn nhập thông tin liên quan đến vấn đề này vào công cụ tìm kiếm Google, bạn có thể dễ dàng tìm thấy video trong đó các nhà phát triển trình diễn hầu hết các chức năng phụ trợ, chẳng hạn như phóng to định dạng màn hình, triển khai mô phỏng cảm ứng trên màn hình cảm ứng và khả năng mô phỏng mức thấp -Kết nối Internet chất lượng.

Cảm biến của thiết bị được mô phỏng như thế nào?

Hệ thống này tự hào có một tính năng quan trọng của chế độ thiết bị như bắt chước các cảm biến đặc biệt của thiết bị cầm tay (ví dụ như gia tốc kế và màn hình cảm ứng). Bạn cũng có thể chỉ định tọa độ địa lý. Thông thường, đối tượng đó nằm trong tab “Thành phần” ở dưới cùng, nơi đặt tab “Mô phỏng” và sau đó là “Cảm biến”.

Khi chọn màu trong khi làm việc với trình chỉnh sửa kiểu, bạn có cơ hội nhấp vào mẫu màu và sau đó một cửa sổ sẽ xuất hiện nơi người dùng có thể chọn màu sắc mình cần. Trong khi cửa sổ vẫn ở chế độ hoạt động, con trỏ chuột của bạn sẽ trở thành kính lúp để giúp bạn chọn màu dễ dàng hơn. Toàn bộ quy trình được thực hiện rõ ràng và nhanh chóng.

Chế độ trạng thái phần tử cưỡng bức

Bộ công cụ phát triển cung cấp khả năng tạo ra các trạng thái CSS của phần tử DOM. Ví dụ: :hover và :focus có thể được sử dụng. Đồng thời, việc viết phong cách của họ được đơn giản hóa. Loại tính năng này có thể khả dụng ở chế độ có thể truy cập nơi đặt trình soạn thảo CSS.

Google Chrome bao gồm một bộ chức năng khổng lồ để nhà phát triển web thử nghiệm các trang web. Bảng điều khiển dành cho nhà phát triển mở bằng cách nhấn F12:

Yếu tố

Trước mắt chúng tôi là cây HTML của trang web, được chia thành các phần. Bố cục của nội dung bên trong có thể khác nhau, trong trường hợp này tôi chia nó thành 2 cột, bên trái là cây HTML và bên phải là thuộc tính CSS của thành phần đã chọn (thẻ hoặc thẻ, áp dụng cả hai tùy chọn). Việc thay đổi cây HTML khá đơn giản, chọn thẻ bạn cần và nhấn F2, sau đó thay đổi mã HTML của khối, tại đây bạn không chỉ có thể thay đổi nội dung của nó mà còn có thể thêm các thuộc tính khác vào thẻ này cũng như thêm một thẻ khác trước hoặc sau thẻ này. Khi bạn di chuột qua thẻ này, khu vực của thẻ này sẽ được đánh dấu trên màn hình, trong đó phần đệm và lề được đánh dấu bằng màu cam và xanh lục. Tôi cũng muốn lưu ý một tính năng quan trọng: nếu nhà phát triển mắc lỗi và không áp dụng clear:both sau float:left, làm gián đoạn bố cục, thì khu vực của thẻ được chỉ định sẽ không hiển thị hoặc sẽ được hiển thị cùng với một lỗi. Nhân tiện, đây là lỗi phổ biến nhất!

Tìm đúng thẻ trong cây không khó, có 2 cách. Phương pháp một - phía trước Elements trong menu có 2 biểu tượng, biểu tượng thứ hai là chuyển trang web sang phiên bản di động (bạn thậm chí không cần mua điện thoại, mọi thứ đều hiển thị cho người thiết kế bố cục), và đầu tiên là chọn một thành phần trên trang. Chỉ cần nhấp vào nút đầu tiên, chọn khối mong muốn và nhấp chuột trái vào nó là đủ, bằng cách này, chúng tôi sẽ mở thẻ cụ thể này để điều chỉnh. Phương pháp thứ hai, nhanh hơn, là nhấp chuột phải ngay vào phần mong muốn của trang web và chọn “Xem mã”.

Sau khi chọn thẻ mong muốn, chúng ta có thể dễ dàng điều chỉnh nó theo hình thức mình cần. Tôi muốn lưu ý rằng đây là cách tôi luôn điều chỉnh bố cục, tôi chỉ cần lấy các thẻ cần thiết và thay đổi thuộc tính của chúng trong trình duyệt và khi tôi chọn tùy chọn cuối cùng mà tôi thích, tôi sao chép kết quả vào html và css của mình. Bây giờ hãy nói về cột bên phải - kiểu và tính toán. được tính toán - phiên bản cuối cùng của tất cả các kiểu được áp dụng cho thẻ. Hãy nhớ rằng, tôi đã nói rằng theo mặc định, trình duyệt có danh sách các thuộc tính cho thẻ và chúng tôi chỉ thay đổi chúng thành những thuộc tính chúng tôi cần, vì vậy đây chính là danh sách phiên bản cuối cùng, tức là cùng với các thuộc tính mà chúng tôi đã thay đổi. Nếu xem xét kỹ, bạn có thể thay thế tính năng thú vị là hầu hết tất cả các thẻ đều có cùng thuộc tính bằng các giá trị khác nhau và điều này cho thấy rằng gần như toàn bộ trang web có thể được bố trí chỉ bằng 1 hoặc 2 thẻ, điều này có vẻ vô lý nhưng có thể :) Trong cột đầu tiên, Kiểu, các kiểu chúng tôi đã thay đổi (các biểu định kiểu của chúng tôi) được chỉ định. Trong tab này, chúng ta có thể thay đổi ảnh hưởng của các kiểu trên thẻ này bằng cách làm việc trong khối element.style, đồng thời thay đổi id và lớp cho tất cả các thành phần trên trang web.

Vì vậy, một nhiệm vụ thực tế là tạo 3 cột bằng cách sử dụng float:left với nội dung của một hình ảnh + văn bản với một lớp. Tiếp theo, thông qua bảng điều khiển dành cho nhà phát triển, thêm khung, điều chỉnh khoảng cách giữa các khối và văn bản bằng cách sử dụng lề trong và ngoài (thay đổi thuộc tính lớp), thay đổi màu của văn bản trong mỗi khối thành màu của riêng bạn (ở đây là element.style). Điều này sẽ khá đủ, mặc dù bạn có thể tự mình thử nghiệm bằng cách thay đổi mã của các trang web khác theo cách này. Nhưng hãy nhớ điều quan trọng nhất, bạn không thay đổi các tệp html và css thực mà chỉ thay đổi các tệp tạm thời cho trang cụ thể này và ngay khi bạn làm mới trang, tất cả cài đặt của bạn sẽ bị mất!

Bảng điều khiển

Không có nó, cuộc sống không còn ngọt ngào đối với bất kỳ lập trình viên nào :) Tuyệt đối tất cả CẢNH BÁO và LỖI đều được ghi vào khối này. Đảm bảo rằng tất cả các lỗi được hiển thị bằng cách kiểm tra như sau: nhấp vào biểu tượng bộ lọc trong phần này và chọn tab “tất cả”, nghĩa là hiển thị tất cả các lỗi. Mặc định luôn là "tất cả", nhưng biết các bạn, học sinh của tôi... :)
Nhật ký được lưu trong trang này kể từ thời điểm bảng điều khiển được mở chứ không phải từ lúc tải trang. Do đó, nếu bạn tải trang rồi mở bảng điều khiển, bạn sẽ không thấy bất kỳ lỗi nào, mặc dù trên trang có lỗi! Do đó, trước tiên chúng ta mở bảng điều khiển, sau đó tải lại trang này! Bây giờ, ở bên phải lỗi, tệp xảy ra lỗi và thậm chí cả dòng đó sẽ được chỉ định. Tôi muốn lưu ý rằng bảng điều khiển cũng nhận được lỗi từ nhiều plugin và tiện ích mở rộng đã cài đặt khác nhau cho Google Chrome, bao gồm cả vi-rút (chúng cũng được đăng ký dưới dạng plugin hoặc tiện ích mở rộng) cũng như khi Ajax và các tập lệnh bên ngoài khác đang chạy, dòng 1 hoặc 0 có thể được chỉ định trong tệp thực thi chứ không phải dòng nơi AJAX này được thực thi. Điều này đáng được tính đến!

Khi làm việc với JavaScript, chúng ta có thể gặp phải thực tế là khi nhấp vào, một chuyển hướng sẽ xảy ra sang một trang khác ở định dạng: nhấp chuột - lỗi - chuyển hướng và lỗi xảy ra trước dòng được cho là chặn chuyển hướng và do đó bảng điều khiển trống . Giải pháp cực kỳ đơn giản, hãy đánh dấu vào ô Preserve Log, khi đó nhật ký sẽ không bị xóa sau khi tải lại hoặc chuyển hướng trang. Nếu quên tính năng này, bạn sẽ mất nửa năm để tìm lỗi :)

Tôi sẽ không viết về việc các ghi chú của chúng tôi được đưa vào bảng điều khiển từ console.log, bạn đã biết điều này từ khóa học chung :)

Nguồn và Mạng

Một cách tuyệt vời để giám sát tất cả các yêu cầu đến và đi cũng như kết quả thực hiện của chúng. Trong tab Nguồn, chúng ta có thể thấy tất cả các tệp bổ sung được tải, cụ thể là hình ảnh và tập lệnh. Cách dễ nhất là lấy hình ảnh bạn cần, xem kích thước của nó và lưu nó vào máy tính của bạn. Bạn cũng có thể mở tệp JavaScript ở đó. Bằng cách nhấp chuột phải vào tệp mong muốn, bạn có thể chọn “Mở liên kết trong tab mới” và lưu tệp từ trang mới bằng cách nhấn tổ hợp ctrl+s. Đồng ý, nó tiện lợi :)

Mạng có chức năng phức tạp hơn, có danh sách tất cả các yêu cầu và phản hồi của chúng với máy chủ. Xin lưu ý rằng còn có Filter - All, cũng như Preserve log, điều này rất quan trọng!

Giao diện của phần này có thể hơi khác một chút; phần tổng quan (biểu tượng tương ứng với biểu đồ) có thể được bật, mà tôi thường tắt. Ở cột bên trái, chúng tôi có yêu cầu, ở cột bên phải, chúng tôi có câu trả lời. Đồng thời, các câu trả lời cũng được chia thành các phần nhỏ. Yêu cầu đầu tiên luôn đi đến tệp thực thi (url được chỉ định), nếu bạn đóng cột bên phải, bạn có thể xem chi tiết về yêu cầu, cụ thể là: phương thức yêu cầu, thời gian thực hiện (điều này sẽ cho biết mức độ tốt như thế nào) mạng và trang web hoạt động, kích thước của tệp Bằng cách đóng cột bên phải có thể được mở lại bằng cách nhấp lại vào tệp mà chúng tôi quan tâm để phân tích.

Trong tab tiêu đề, chúng ta có loại yêu cầu (tệp, phương thức, ip và trạng thái phản hồi), Tiêu đề phản hồi và Tiêu đề yêu cầu. Tiêu đề yêu cầu là những gì trình duyệt của bạn gửi đến máy chủ, nó không chỉ yêu cầu một trang mà còn gửi các cookie hiện có, ngôn ngữ ưu tiên của trang, liệu nén gzip có cho phép tệp hay không, tên đầy đủ và phiên bản của trình duyệt cũng như trang từ đó. nơi nó gửi yêu cầu. Tôi muốn lưu ý rằng sau này khi bạn học CURL bằng PHP, bạn cũng có thể gửi tất cả dữ liệu này! Phần Phản hồi chứa các tiêu đề phản hồi. Hãy nhớ lý thuyết về cách thức hoạt động của PHP, dữ liệu gửi đi được chia thành 2 khối, đầu tiên là các header được gửi đi, sau đó là nội dung, khi nội dung được gửi đi thì các header không thể gửi được. Trong các tiêu đề, máy chủ sẽ gửi cookie, nếu chúng cần thay đổi, mã hóa trang, phiên bản máy chủ (là một lỗ hổng và phải được ẩn, như được thực hiện trên trang web, ya.ru, google.ru, v.v. .), ngày của tệp (với mục đích không tải xuống lại nếu không có thay đổi nào xảy ra kể từ lần cuối sử dụng trình duyệt).

Tôi muốn xem xét ngày cập nhật tệp một cách chi tiết hơn; có trường hợp mặc dù tệp đã được thay đổi nhưng trình duyệt vẫn không kiểm tra phiên bản của nó mà chỉ tải phiên bản cũ được lưu trong bộ đệm. Để xóa bộ nhớ đệm trình duyệt của máy khách, chỉ cần thay đổi tên tệp từ scripts.js?v=1 thành scripts.js?v=2. Như bạn có thể thấy, chúng tôi chỉ thay đổi dữ liệu do GET gửi và hầu hết mọi người sẽ tải tập lệnh mới (không phải 100% nhưng khá chấp nhận được đối với hầu hết các trang web). Nhưng sau khi chỉnh sửa dấu phẩy trong tập lệnh trong quá trình phát triển, việc chạy và thay đổi html bằng kết nối của cùng một tệp js này sẽ không thuận tiện lắm, ở đây, một hộp kiểm quan trọng khác “Tắt bộ đệm” sẽ hỗ trợ nhà phát triển nếu đúng như vậy; được bật thì tất cả các tệp sẽ không được lưu vào bộ nhớ đệm và các tệp mới sẽ được tải lên mỗi lần! Chúng tôi phát triển một trang web với hộp kiểm này và khi tải xuống phiên bản mới của tập lệnh cho tất cả người dùng, chúng tôi chỉ thay đổi phiên bản?v=3.

Xem trước và phản hồi

Sau khi yêu cầu, máy chủ trả về nội dung nào đó cho chúng ta, chế độ xem thân thiện với con người sẽ chuyển đến Xem trước và nguồn chưa được định dạng sẽ chuyển đến Phản hồi. Sử dụng ví dụ về yêu cầu hình ảnh, chính hình ảnh đó sẽ xuất hiện trong tab Xem trước và mã nguồn của hình ảnh sẽ bị ẩn vì lý do đạo đức, nhưng nếu bạn yêu cầu các tệp HTML, JS, PHP thì bạn chắc chắn nên xem xét Tab Phản hồi để đảm bảo rằng Nội dung chúng tôi yêu cầu và mong đợi được xem đã quay trở lại! Khi làm việc với Ajax trong Bản xem trước, chúng ta sẽ có được chế độ xem thuận tiện về phản hồi JSON tương tự như cây HTML trong phần Thành phần, điều này cũng sẽ đơn giản hóa việc phát triển trang web của chúng ta.

Bảng điều khiển Ajax và nhà phát triển

Khi phát triển mã bằng Ajax, chúng tôi thực hiện như sau:
1) Chúng tôi viết mã, đính kèm một sự kiện vào nút.
2) Mở bảng dành cho nhà phát triển và làm mới trang.
3) Chúng tôi kiểm tra xem không có lỗi nào, đặt Nhật ký lưu giữ, vì trong trường hợp chuyển hướng, chúng tôi cần chặn lỗi.
4) Nhấp vào nút gọi yêu cầu Ajax. Bây giờ, nếu không có chuyển hướng, trước tiên hãy xem kỹ tab Console và đảm bảo rằng đã xảy ra lỗi. Lỗi có thể thuộc bất kỳ loại nào, không chỉ là phản hồi không chính xác từ máy chủ mà còn là lỗi đánh máy trong chính mã. Nếu không có lỗi trong bảng điều khiển hoặc không rõ ràng, chẳng hạn như dòng 0 hoặc 1, thì chúng tôi tiếp tục phân tích tab Mạng.
5) Trong tab Mạng, chúng tôi đảm bảo rằng yêu cầu đã được gửi đến đúng URL, trạng thái phản hồi là 200 chứ không phải 404, chúng tôi phân tích chính yêu cầu đó, nghĩa là mở tab Phản hồi và xem kỹ xem có tệp không đã gửi cho chúng tôi là câu trả lời đúng, chính xác là câu trả lời chúng tôi mong đợi hoặc phản hồi chứa rác dưới dạng mã, lỗi không cần thiết, v.v. Nếu bạn hiểu phản hồi bạn mong đợi từ máy chủ thì bạn có thể dễ dàng so sánh những gì bạn mong đợi với thực tế, xem lỗi và sửa nó!

tái bút Tôi chúc tất cả các vị khách của mình lập trình thành công và tôi yêu cầu học sinh của mình hiểu rõ những gì tôi đã viết ở đây. Và nếu tôi hỏi bạn liệu một yêu cầu AJAX có được gửi đến máy chủ hay không và phản hồi nào đến, thì bạn phải cho tôi câu trả lời chính xác và không chớp mắt như một “cô gái tóc vàng”. :)
Có lẽ bài viết này sẽ được phát triển hơn nữa trong tương lai!