Cuộc cách mạng của Công cụ của Chrome cho nhà phát triển năm 2013

Arthur Evans

Tim Statler

Giới thiệu

Khi độ phức tạp và chức năng của các ứng dụng web ngày càng tăng, thì Công cụ của Chrome cho nhà phát triển cũng vậy. Trong bản tóm tắt nội dung của Paul Irish tại Google I/O 2013 về chủ đề Công cụ của Chrome cho nhà phát triển – Cuộc cách mạng 2013, bạn sẽ tìm hiểu các tính năng mới nhất đang cách mạng hoá cách bạn xây dựng và kiểm thử ứng dụng web.

Nếu bỏ lỡ bài nói chuyện của Paul, bạn có thể xem lại ở trên (hãy cứ xem, chúng tôi sẽ đợi bạn) hoặc bạn có thể chuyển thẳng đến phần tóm tắt tính năng:

• Workspaces cho phép bạn sử dụng DevTools làm trình soạn thảo mã nguồn.
• Nếu sử dụng Sass, bạn sẽ thích tính năng chỉnh sửa trực tiếp các tệp Sass (.scss) trong DevTools và thấy các thay đổi được phản ánh ngay lập tức trên trang.
• Bạn đã có thể gỡ lỗi từ xa các trang trên Chrome cho Android được một thời gian, nhưng tiện ích ADB giúp việc kết nối với các thiết bị Android trở nên đơn giản hơn. Tính năng chuyển tiếp cổng ngược cho phép bạn dễ dàng kết nối với máy chủ cục bộ trên máy phát triển từ thiết bị của mình.
• Hiệu suất luôn là mối lo ngại trong các ứng dụng web và DevTools có một số tính năng mới để giúp bạn theo dõi các nút thắt cổ chai, bao gồm cả hình ảnh Biểu đồ hình ngọn lửa mới để phân tích CPU và một số công cụ mới để gỡ lỗi các vấn đề về hiệu suất liên quan đến việc kết xuất và sử dụng bộ nhớ.

Các tính năng này hiện có trong Chrome 28, hiện có trong kênh cập nhật ổn định.

Không gian làm việc

Workspaces cho phép bạn liên kết các tài nguyên được phân phát từ máy chủ web cục bộ với các tệp trên ổ đĩa. Nhờ đó, bạn có thể chỉnh sửa bất kỳ loại tệp nguồn nào trong bảng điều khiển Nguồn và lưu các thay đổi đó vào ổ đĩa. Tương tự, những thay đổi mà bạn thực hiện trong trình chỉnh sửa bên ngoài sẽ xuất hiện ngay lập tức trong bảng điều khiển Nguồn.

Ảnh chụp màn hình dưới đây cho thấy ví dụ về không gian làm việc đang hoạt động. Trang web Lịch đã được tải qua localhost, trong khi bảng điều khiển Nguồn hiển thị chế độ xem hệ thống tệp cục bộ của thư mục gốc của trang web. Nội dung chỉnh sửa mà bạn thực hiện đối với các tệp trong thư mục này sẽ được lưu vào ổ đĩa. Trong ảnh chụp màn hình bên dưới, một số thay đổi chưa được lưu đã được thực hiện đối với Calendar.css, vì vậy, dấu hoa thị được đặt bên cạnh tên tệp.

Việc nhấn Control+S hoặc Command+S sẽ lưu các thay đổi vào ổ đĩa.

Tương tự, những thay đổi bạn thực hiện đối với kiểu của một phần tử trong bảng điều khiển Phần tử sẽ được phản ánh trong cả bảng điều khiển Nguồn và trình chỉnh sửa bên ngoài. Lưu ý:

• Các thay đổi về DOM trong bảng điều khiển Phần tử không được duy trì. Chỉ những thay đổi về kiểu trên bảng điều khiển Elements (Thành phần) mới được duy trì.
• Bạn chỉ có thể thay đổi các kiểu được xác định trong tệp CSS bên ngoài. Các thay đổi đối với element.style hoặc kiểu nội tuyến sẽ không được lưu lại vào ổ đĩa. Nếu có kiểu nội tuyến, bạn có thể thay đổi các kiểu đó trên bảng điều khiển Nguồn.
• Các thay đổi về kiểu trên bảng điều khiển Elements (Thành phần) sẽ được lưu giữ ngay lập tức; bạn không cần nhấn Control+S hoặc Command+S.

Thêm thư mục không gian làm việc

Có hai phần để sử dụng không gian làm việc: cung cấp nội dung của một thư mục cục bộ cho DevTools và liên kết thư mục đó với một URL.

Cách thêm thư mục không gian làm việc mới:

1. Trong DevTools, hãy nhấp vào biểu tượng Cài đặt để mở phần Cài đặt DevTools.
2. Nhấp vào Không gian làm việc.
3. Nhấp vào Thêm thư mục.
4. Duyệt đến thư mục chứa các tệp nguồn của dự án rồi nhấp vào Chọn.
5. Khi được nhắc, hãy nhấp vào Allow (Cho phép) để cấp cho DevTools toàn quyền truy cập vào thư mục.

Bảng điều khiển Sources (Nguồn) hiển thị thư mục không gian làm việc mới cùng với các nguồn được tải qua localhost. Giờ đây, bạn có thể chỉnh sửa trực tiếp các tệp trong thư mục không gian làm việc và các thay đổi đó sẽ được lưu vào ổ đĩa.

Ánh xạ thư mục đến URL

Sau khi thêm thư mục không gian làm việc, bạn có thể liên kết thư mục đó với một URL. Bất cứ khi nào Chrome tải URL đã chỉ định, bảng điều khiển Nguồn sẽ hiển thị nội dung thư mục không gian làm việc thay vì nội dung thư mục mạng.

Cách liên kết thư mục không gian làm việc với URL:

1. Trong bảng điều khiển Nguồn, hãy nhấp chuột phải hoặc nhấn tổ hợp phím Ctrl+nhấp vào một tệp trong thư mục không gian làm việc.
2. Chọn Map to Network Resource (Liên kết đến tài nguyên mạng).

   

3. Chọn tài nguyên mạng tương ứng trên trang đang tải.

   

4. Tải lại trang trong Chrome.

Giờ đây, bảng điều khiển Nguồn sẽ chỉ hiển thị nội dung của thư mục không gian làm việc cục bộ của trang web, chứ không phải nguồn máy chủ cục bộ, như minh hoạ bên dưới.

Lưu ý: Nếu bạn vẫn thấy các nguồn máy chủ cục bộ, hãy làm mới trang trong Chrome.

Có hai cách khác để liên kết thư mục mạng với thư mục không gian làm việc:

• Nhấp chuột phải (hoặc nhấn tổ hợp phím Ctrl+nhấp) vào một tài nguyên mạng rồi chọn Map to File System Resource (Liên kết với tài nguyên hệ thống tệp).
• Thêm mối liên kết theo cách thủ công trong thẻ Không gian làm việc của hộp thoại Cài đặt DevTools.

Gỡ lỗi Bản đồ nguồn Sass/CSS

Tính năng gỡ lỗi Sass (Bản đồ nguồn CSS) cho phép bạn chỉnh sửa trực tiếp các tệp Sass (.scss) trong bảng điều khiển Nguồn và xem kết quả mà không cần rời khỏi DevTools hoặc làm mới trang. Khi bạn kiểm tra một phần tử có kiểu do tệp CSS do Sass tạo ra, bảng điều khiển Elements (Thành phần) sẽ hiển thị đường liên kết đến tệp .scss, chứ không phải tệp .css đã tạo.

Khi nhấp vào đường liên kết, tệp SCSS (có thể chỉnh sửa) sẽ mở ra trong bảng điều khiển Nguồn. Bạn có thể thay đổi tệp này theo ý muốn.

Khi bạn lưu các thay đổi vào tệp SCSS (trong DevTools hoặc nơi khác), trình biên dịch Sass sẽ tạo lại các tệp CSS. Sau đó, DevTools sẽ tải lại tệp CSS mới tạo.

Lưu ý: Về mặt kỹ thuật, tính năng này sẽ hoạt động với bất kỳ trình xử lý trước CSS nào hỗ trợ bản đồ nguồn. Để biết thêm thông tin, hãy đọc phần làm việc với trình xử lý trước CSS trong tài liệu về Công cụ cho nhà phát triển.

Sử dụng tính năng gỡ lỗi Sass

Để sử dụng tính năng gỡ lỗi Sass trong Chrome, bạn cần có phiên bản phát hành trước của trình biên dịch Sass. Đây là phiên bản duy nhất hiện hỗ trợ tạo bản đồ nguồn.

gem install sass -v '>=3.3.0alpha' --pre

Bạn cũng cần bật tính năng gỡ lỗi Sass trong các thử nghiệm DevTools:

1. Mở about:flags trong Chrome.
2. Bật Bật thử nghiệm Công cụ cho nhà phát triển.
3. Khởi động lại Chrome.
4. Mở phần Cài đặt DevTools rồi nhấp vào Thử nghiệm.
5. Bật tuỳ chọn Hỗ trợ Sass (hoặc Gỡ lỗi trang định kiểu Sass, tuỳ thuộc vào phiên bản trình duyệt bạn đang sử dụng).

Sau khi cài đặt Sass, hãy khởi động trình biên dịch Sass để theo dõi các thay đổi đối với tệp nguồn Sass và tạo tệp bản đồ nguồn cho mỗi tệp CSS đã tạo, ví dụ:

sass --watch **--sourcemap** sass/styles.scss:styles.css

Nếu bạn đang sử dụng Compass, hãy lưu ý rằng Compass chưa hỗ trợ phiên bản phát hành trước của Sass, vì vậy, bạn không thể gỡ lỗi Sass bằng Compass.

Cách hoạt động

Đối với mỗi tệp nguồn SCSS mà trình biên dịch xử lý, trình biên dịch Sass sẽ tạo một tệp bản đồ nguồn (tệp .map) ngoài CSS đã biên dịch. Tệp bản đồ nguồn là tệp JSON xác định mối liên kết giữa tệp .scss và tệp .css. Mỗi tệp CSS chứa một chú thích chỉ định URL của tệp bản đồ nguồn, được nhúng trong một nhận xét đặc biệt:

/*# sourceMappingURL=<url>; */

Ví dụ: với tệp SCSS sau:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass tạo một tệp CSS như sau, với chú thích sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

Dưới đây là tệp bản đồ nguồn mẫu:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Dễ dàng gỡ lỗi từ xa hơn trên Chrome cho Android

Một số tính năng mới trong Công cụ của Chrome cho nhà phát triển giúp bạn thiết lập tính năng gỡ lỗi từ xa trên Chrome cho Android dễ dàng hơn: tiện ích ADB và chuyển tiếp cổng ngược.

Tiện ích ADB Chrome giúp đơn giản hoá quá trình thiết lập tính năng gỡ lỗi từ xa. Phương thức này mang lại các lợi ích sau:

• Gói Cầu gỡ lỗi Android (ADB) để bạn không phải cài đặt.
• Không cần tương tác với dòng lệnh.
• Giao diện người dùng giúp bạn dễ dàng khởi động và dừng trình nền ADB cũng như xem các thiết bị đã kết nối.

Tính năng chuyển tiếp cổng ngược giúp bạn dễ dàng kết nối Chrome trên Android với một máy chủ web chạy trên máy chủ cục bộ. Đây là điều mà một số môi trường mạng gây khó khăn nếu không có một số thủ thuật DNS.

Sử dụng tiện ích ADB

Trước tiên, hãy cài đặt tiện ích ADB Chrome từ Cửa hàng Chrome trực tuyến. Nhấp vào Thêm vào Chrome để cài đặt tiện ích.

Lưu ý: Windows 8 không hỗ trợ việc cài đặt tiện ích qua Cửa hàng Chrome trực tuyến. Nếu bạn gặp vấn đề khi cài đặt từ Cửa hàng Chrome trực tuyến, hãy xem bài viết Gỡ lỗi từ xa trên Android để biết hướng dẫn cài đặt thay thế.

Sau khi cài đặt, biểu tượng trình đơn Android màu xám sẽ xuất hiện trong Chrome. Để khởi động ADB, hãy nhấp vào biểu tượng rồi nhấp vào Start ADB (Bắt đầu ADB).

Sau khi ADB khởi động, biểu tượng trình đơn sẽ chuyển sang màu xanh lục và hiển thị số lượng thiết bị hiện đang kết nối (nếu có).

Nhấp vào Xem thiết bị để mở trang about:inspect hiển thị từng thiết bị đã kết nối và các thẻ của thiết bị đó. Để kiểm tra một thẻ trong DevTools, hãy nhấp vào đường liên kết "kiểm tra" bên cạnh URL của thẻ đó.

Nếu bạn không thấy thiết bị nào được kết nối, hãy kiểm tra để đảm bảo thiết bị của bạn đã kết nối với USB và tính năng Gỡ lỗi qua USB đã được bật trong phần cài đặt của Chrome cho Android. Để biết hướng dẫn và các bước khắc phục sự cố chi tiết hơn, hãy xem phần Gỡ lỗi từ xa trên Android.

Chuyển tiếp cổng ngược (thử nghiệm)

Thông thường, bạn có một máy chủ web chạy trên máy phát triển cục bộ và bạn muốn kết nối với trang web đó từ thiết bị của mình. Nếu máy phát triển và thiết bị đang ở trên cùng một mạng, thì việc này rất đơn giản. Tuy nhiên, trong một số trường hợp, chẳng hạn như trên mạng công ty bị hạn chế, bạn có thể không thực hiện được việc này nếu không có một số thủ thuật DNS thông minh. Tính năng mới trong Chrome dành cho Android có tên là chuyển tiếp cổng ngược giúp bạn thực hiện việc này một cách dễ dàng. Tính năng này hoạt động bằng cách tạo một cổng TCP đang nghe trên thiết bị của bạn để chuyển tiếp lưu lượng truy cập qua USB đến một cổng TCP cụ thể trên máy phát triển.

Để sử dụng tính năng này, bạn cần có:

• Cài đặt Chrome 28 trở lên trên máy phát triển
• Chrome Beta cho Android đã được cài đặt trên thiết bị của bạn
• Cầu gỡ lỗi Android (tiện ích ADB Chrome hoặc SDK Android đầy đủ) được cài đặt trên máy phát triển

Để sử dụng tính năng chuyển tiếp cổng ngược, bạn cần kết nối thiết bị để gỡ lỗi từ xa, như mô tả trong phần Sử dụng tiện ích ADB. Sau đó, bạn cần bật tính năng chuyển tiếp cổng ngược và thêm quy tắc chuyển tiếp cổng cho ứng dụng.

Trước tiên, hãy bật tính năng chuyển tiếp cổng ngược:

1. Mở Chrome trên máy phát triển.
2. Trong about:flags, hãy bật Bật thử nghiệm Công cụ cho nhà phát triển rồi khởi động lại Chrome.
3. Mở about:inspect. Bạn sẽ thấy thiết bị di động của mình và danh sách các thẻ đang mở.
4. Nhấp vào đường liên kết "kiểm tra" bên cạnh bất kỳ trang web nào trong danh sách.
5. Trong cửa sổ DevTools (Công cụ phát triển) mở ra, hãy mở bảng Cài đặt.
6. Trong phần Thử nghiệm, hãy bật tuỳ chọn Bật tính năng chuyển tiếp cổng ngược.
7. Đóng cửa sổ DevTools rồi quay lại about:inspect.

Sau đó, hãy thêm quy tắc chuyển tiếp cổng:

1. Nhấp lại vào đường liên kết "kiểm tra" để mở DevTools và mở lại phần Cài đặt DevTools.
2. Nhấp vào thẻ Chuyển tiếp cổng.
3. Trong trường Cổng thiết bị, hãy nhập số cổng mà Chrome sẽ kết nối trên thiết bị Android của bạn (mặc định là 8080).
4. Trong trường Target (Mục tiêu), hãy thêm số cổng mà ứng dụng web của bạn đang chạy trên máy phát triển.

   

5. Trong Chrome cho Android, hãy mở localhost:, trong đó là giá trị bạn đã nhập vào trường Cổng thiết bị (mặc định là 8080).

Bạn sẽ thấy nội dung được máy phát triển phân phát.

Hình ảnh biểu đồ hình ngọn lửa cho hồ sơ JavaScript

Chế độ xem Biểu đồ hình ngọn lửa mới cung cấp hình ảnh trực quan về quá trình xử lý JavaScript theo thời gian, tương tự như những hình ảnh có trong bảng điều khiển Dòng thời gian và Mạng.

Trục hoành là thời gian và trục tung là ngăn xếp lệnh gọi. Ở đầu bảng điều khiển, bạn sẽ thấy một bản tổng quan cho thấy toàn bộ bản ghi. Bạn có thể "phóng to" một khu vực của bản tổng quan bằng cách chọn khu vực đó bằng chuột, như minh hoạ bên dưới. Tỷ lệ thời gian của chế độ xem chi tiết sẽ thu hẹp theo đó.

Trong chế độ xem chi tiết, ngăn xếp lệnh gọi được biểu thị dưới dạng ngăn xếp "khối" hàm. Khối nằm trên một khối khác được khối hàm thấp hơn gọi. Khi di chuột qua một khối nhất định, bạn sẽ thấy tên hàm và dữ liệu thời gian của khối đó:

• Name (Tên) – Tên của hàm.
• Thời gian tự thực thi – Thời gian cần thiết để hoàn tất lệnh gọi hàm hiện tại, chỉ bao gồm các câu lệnh trong chính hàm đó, không bao gồm bất kỳ hàm nào mà hàm đó gọi.
• Tổng thời gian – Thời gian cần thiết để hoàn tất lệnh gọi hiện tại của hàm này và mọi hàm mà hàm này gọi.
• Thời gian tự tổng hợp – Tổng thời gian cho tất cả các lệnh gọi hàm trong bản ghi, không bao gồm các hàm do hàm này gọi.
• Tổng thời gian tổng hợp – Tổng thời gian tổng hợp cho tất cả các lệnh gọi hàm, bao gồm cả các hàm do hàm này gọi.

Khi nhấp vào một khối hàm, tệp JavaScript chứa khối đó sẽ mở ra trong bảng điều khiển Nguồn, tại dòng xác định hàm.

Cách sử dụng biểu đồ hình ngọn lửa:

1. Trong DevTools, hãy nhấp vào thẻ Profiles (Hồ sơ).
2. Chọn Record JavaScript CPU profile (Ghi hồ sơ CPU JavaScript) rồi nhấp vào Start (Bắt đầu).
3. Khi bạn thu thập xong dữ liệu, hãy nhấp vào Dừng.
4. Trong chế độ xem hồ sơ, hãy chọn hình ảnh trực quan Biểu đồ hình ngọn lửa.

   

5 tính năng đo lường hiệu suất chính

Kết thúc bản khảo sát về những tiến bộ mang tính cách mạng trong DevTools là một số tính năng mới để điều tra các vấn đề về hiệu suất:

• Chế độ vẽ liên tục
• Hiển thị hình chữ nhật Paint và đường viền lớp
• Đồng hồ FPS
• Tìm bố cục đồng bộ bắt buộc (layout thrashing)
• Theo dõi quá trình phân bổ đối tượng

Chế độ vẽ liên tục

Chế độ vẽ liên tục là một tuỳ chọn trong phần Cài đặt Công cụ cho nhà phát triển (Rendering (Hiển thị) > Enable continuous page repainting (Bật tính năng vẽ lại liên tục trang)). Chế độ này giúp bạn xác định chi phí hiển thị của từng phần tử hoặc kiểu CSS.

Thông thường, Chrome chỉ vẽ lên màn hình để phản hồi thay đổi về bố cục hoặc kiểu và chỉ những vùng màn hình cần cập nhật. Khi bạn bật tính năng vẽ lại trang liên tục, toàn bộ màn hình sẽ liên tục được vẽ lại. Màn hình hiển thị nhanh cho biết thời gian Chrome cần để vẽ trang, cũng như phạm vi thời gian và biểu đồ cho thấy mức phân phối thời gian vẽ gần đây. Đường kẻ ngang trên biểu đồ cho biết điểm đánh dấu 16,6 mili giây.

Lợi ích của việc sử dụng tính năng này là bạn có thể duyệt qua cây DOM trong bảng điều khiển Phần tử và ẩn từng phần tử (nhấn phím H để ẩn phần tử đang được chọn) hoặc tắt kiểu CSS của một phần tử. Bạn có thể xem thời gian một phần tử hoặc kiểu thêm vào "trọng số" kết xuất trang (nếu có) bằng cách chú ý đến những thay đổi về thời gian vẽ trang. Nếu việc ẩn một phần tử duy nhất làm giảm đáng kể thời gian vẽ, bạn cần tập trung vào việc tạo kiểu hoặc xây dựng phần tử đó.

Cách bật chế độ vẽ liên tục:

1. Mở phần Cài đặt DevTools. 1.Trên thẻ General (Chung), trong mục Rendering (Hiển thị), hãy bật tuỳ chọn Enable continuous page repainting (Bật tính năng vẽ lại liên tục trang).

Lưu ý: Nếu bạn không thấy tuỳ chọn này trong phần Cài đặt, hãy mở about:flags, bật GPU compositing on all pages (Kết hợp GPU trên tất cả các trang) rồi khởi động lại Chrome.

Để biết thêm thông tin, hãy xem phần Phân tích thời gian vẽ lâu bằng Chế độ vẽ liên tục của DevTools.

Hiển thị hình chữ nhật vẽ và đường viền lớp

Một tuỳ chọn khác trong DevTools là hiển thị những vùng hình chữ nhật trên màn hình đang được vẽ. (Cài đặt > Kết xuất > Hiển thị hình chữ nhật vẽ). Ví dụ: trong ảnh chụp màn hình bên dưới, một hình chữ nhật sơn đang được vẽ trên vùng áp dụng hiệu ứng di chuột CSS cho hình ảnh màu tím. Điều này là tốt vì đây là một phần tương đối nhỏ của màn hình.

Bạn nên tránh các phương pháp thiết kế và phát triển khiến toàn bộ màn hình phải được vẽ lại. Ví dụ: trong ảnh chụp màn hình sau, người dùng đang cuộn trang. Một hình chữ nhật vẽ bao quanh thanh cuộn và một hình chữ nhật khác bao quanh toàn bộ phần còn lại của trang. Trong trường hợp này, thủ phạm là hình nền trên phần tử body. Vị trí hình ảnh được đặt thành cố định trong CSS, yêu cầu Chrome vẽ lại toàn bộ trang trên mỗi lần cuộn.

Đồng hồ FPS

Công cụ đo FPS hiển thị tốc độ khung hình hiện tại của trang, tốc độ khung hình tối thiểu và tối đa, biểu đồ thanh cho thấy tốc độ khung hình theo thời gian và biểu đồ dạng hình thang cho thấy sự biến động về tốc độ khung hình.

Cách hiển thị công cụ đo FPS:

1. Mở phần Cài đặt DevTools.
2. Nhấp vào Chung.
3. Trong phần Rendering (Kết xuất), hãy bật Force accelerated compositing (Buộc kết hợp tăng tốc) và Show FPS meter (Hiện công cụ đo FPS).

Bạn có thể buộc công cụ đo FPS luôn xuất hiện bằng cách mở about:flags, bật FPS counter (Bộ đếm FPS) rồi khởi động lại Chrome.

Tìm bố cục đồng bộ bắt buộc (layout thrashing)

Để tối đa hoá hiệu suất kết xuất, Chrome thường phân lô các thay đổi về bố cục do ứng dụng yêu cầu và lên lịch truyền bố cục để tính toán và kết xuất các thay đổi được yêu cầu một cách không đồng bộ. Tuy nhiên, nếu một ứng dụng yêu cầu giá trị của một thuộc tính phụ thuộc vào bố cục (chẳng hạn như offsetHeight hoặc offsetWidth), thì Chrome buộc phải thực hiện bố cục trang ngay lập tức và đồng bộ. Những bố cục đồng bộ bắt buộc này có thể làm giảm đáng kể hiệu suất kết xuất, đặc biệt là khi thực hiện lặp lại trên các cây DOM lớn. Tình huống này còn được gọi là "layout thrashing" (tạm dịch: tình trạng bố cục bị xáo trộn).

Bản ghi Dòng thời gian sẽ cảnh báo cho bạn khi phát hiện thấy bố cục đồng bộ hoá bắt buộc bằng biểu tượng cảnh báo màu vàng bên cạnh bản ghi Dòng thời gian tương ứng. Khi di chuột qua một trong các bản ghi này, bạn sẽ thấy dấu vết ngăn xếp cho mã đã vô hiệu hoá bố cục và mã đã buộc bố cục.

Cửa sổ bật lên này cũng cho biết số lượng nút cần bố cục, kích thước của cây bố cục lại, phạm vi bố cục và gốc bố cục.

Hãy xem Bản minh hoạ dòng thời gian: Chẩn đoán bố cục đồng bộ bắt buộc để biết thêm thông tin.

Theo dõi quá trình phân bổ đối tượng

Tính năng theo dõi mức phân bổ đối tượng là một loại hồ sơ bộ nhớ mới cho thấy mức phân bổ theo thời gian. Khi bạn bắt đầu theo dõi quá trình phân bổ, DevTools sẽ liên tục chụp ảnh nhanh vùng nhớ khối xếp theo thời gian. Hồ sơ phân bổ vùng nhớ khối xếp cho biết vị trí các đối tượng đang được tạo và xác định đường dẫn giữ lại.

Cách theo dõi hoạt động phân bổ đối tượng:

1. Trong DevTools, hãy nhấp vào thẻ Profiles (Hồ sơ).
2. Chọn Record heap allocations (Ghi mức phân bổ vùng nhớ khối xếp) rồi nhấp vào Start (Bắt đầu).
3. Khi bạn đã thu thập xong dữ liệu, hãy nhấp vào Stop recording heap profile (Dừng ghi hồ sơ vùng nhớ khối xếp) (vòng tròn màu đỏ ở góc dưới bên trái của ngăn phân tích tài nguyên).

Phân tích tài nguyên Canvas (thử nghiệm)

Cuối cùng, đây là một tính năng hoàn toàn thử nghiệm để bạn khám phá. Tính năng phân tích tài nguyên Canvas cho phép bạn ghi lại và phát lại các lệnh gọi WebGL được thực hiện trên một phần tử canvas. Bạn có thể thực hiện từng lệnh gọi WebGL hoặc nhóm lệnh gọi và xem kết quả kết xuất. Bạn cũng sẽ thấy thời gian cần thiết để phát lại những cuộc gọi cụ thể đó.

Cách sử dụng tính năng phân tích tài nguyên canvas:

1. Bật tính năng Kiểm tra Canvas trên thẻ Thử nghiệm trong phần cài đặt của Công cụ cho nhà phát triển. (Nếu bạn không thấy thẻ này, hãy mở about:flags, bật Bật thử nghiệm Công cụ cho nhà phát triển rồi khởi động lại Chrome.)
2. Nhấp vào thẻ Hồ sơ.
3. Chọn Capture canvas frame (Ghi lại khung canvas) rồi nhấp vào Take snapshot (Chụp ảnh nhanh).
4. Giờ đây, bạn có thể khám phá các lệnh gọi dùng để tạo khung canvas.