Giới thiệu
Khi sự phức tạp và chức năng của ứng dụng web ngày càng phát triển, Công cụ của Chrome cho nhà phát triển cũng phát triển theo. Trong bản tóm tắt này của bài nói chuyện Google I/O 2013 của Paul Ireland Công cụ của Chrome cho nhà phát triển 2013, bạn sẽ được xem các tính năng mới nhất đang cách mạng hóa cách bạn xây dựng và thử nghiệm các ứng dụng web.
Nếu đã bỏ lỡ buổi nói chuyện của Paul, bạn có thể xem ở phía trên (hãy tiếp tục, chúng tôi sẽ chờ) hoặc bạn có thể chuyển thẳng đến bản tin tóm tắt về tính năng:
- Workspaces cho phép bạn sử dụng Công cụ cho nhà phát triển làm trình soạn thảo mã nguồn.
- Nếu sử dụng Sass, bạn sẽ thích khả năng chỉnh sửa trực tiếp các tệp Sass (.scss) trong Công cụ cho nhà phát triển và thấy các thay đổi của bạn được phản ánh ngay lập tức trên trang.
- Chúng tôi đã có thể gỡ lỗi từ xa các trang trên Chrome dành cho Android trong một thời gian, nhưng tiện ích ADB giúp việc kết nối với thiết bị Android trở nên đơn giản hơn. Tính năng chuyển tiếp cổng đảo 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ột mối quan tâm trong các ứng dụng web và Công cụ cho nhà phát triển có một số tính năng mới để giúp bạn theo dõi nút thắt cổ chai, bao gồm 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 kết xuất và sử dụng bộ nhớ.
Các tính năng này đã có trên Chrome 28 và hiện đã có trên kênh cập nhật chính thức.
Không gian làm việc
Không gian làm việc 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ộ đến 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 những thay đổi đó vào ổ đĩa. Tương tự, những thay đổi 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 bên dưới cho thấy một ví dụ về không gian làm việc đang hoạt động. Trang web Lịch đã được tải qua máy chủ cục bộ, 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. Các nội dung bạn chỉnh sửa đối với tệp trong thư mục này sẽ vẫn được lưu trên ổ đĩ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.
Thao tác nhấn Control+S hoặc Command+S sẽ duy trì nội dung thay đổi vào ổ đĩa.
Tương tự, những thay đổi mà 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 của bạn. Lưu ý:
- Các thay đổi DOM trong bảng điều khiển Phần tử không được duy trì. Chỉ các thay đổi về kiểu trên bảng điều khiển Phần tử mới được duy trì.
- 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 asset.style hoặc đối với kiểu cùng dòng 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 đó trong bảng điều khiển Nguồn.
- Các thay đổi về kiểu trên bảng điều khiển Phần tử được duy trì ngay lập tức; bạn không cần nhấn
Control+ShoặcCommand+S.
Thêm thư mục không gian làm việc
Có hai phần trong việc sử dụng không gian làm việc: cung cấp nội dung của thư mục cục bộ cho Công cụ cho nhà phát triển 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:
- Trong Công cụ cho nhà phát triển, hãy nhấp vào biểu tượng Cài đặt
để mở phần Cài đặt của Công cụ cho nhà phát triển. - Nhấp vào Không gian làm việc.
- Nhấp vào Thêm thư mục.
- Duyệt tìm thư mục chứa các tệp nguồn của dự án rồi nhấp vào Select (Chọn).
- Khi được nhắc, hãy nhấp vào Cho phép để cho phép Công cụ cho nhà phát triển có toàn quyền truy cập vào thư mục.
Bảng điều khiển 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 máy chủ cục bộ. 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 của mình và những nội dung thay đổi đó sẽ được lưu trên ổ đĩa.
Ánh xạ một 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 được 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 cho 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:
- Trong bảng điều khiển Nguồn, hãy nhấp chuột phải hoặc giữ phím Control+nhấp vào một tệp trong thư mục không gian làm việc.
- Chọn Map to Network Resource (Ánh xạ tài nguyên mạng).
- Chọn tài nguyên mạng tương ứng trên trang đang tải.
- Tải lại trang trong Chrome.
Bảng điều khiển Nguồn hiện chỉ hiển thị nội dung của thư mục không gian làm việc cục bộ trên trang web của bạn, chứ không phải các nguồn trên máy chủ cục bộ, như được hiển thị bên dưới.
Có hai cách khác để liên kết mộ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 Control+nhấp) vào một tài nguyên mạng rồi chọn Map to File System Resource (Ánh xạ tớ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 Công cụ cho nhà phát triển.
Gỡ lỗi Bản đồ nguồn Sass/CSS
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 phải rời khỏi Công cụ cho nhà phát triển hoặc làm mới trang. Khi bạn kiểm tra một phần tử có các kiểu được cung cấp bởi tệp CSS tạo bằng Sass, bảng điều khiển Phần tử sẽ hiển thị một đườ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ể thực hiện bất kỳ thay đổi nào bạn muốn đối với tệp này.
Khi bạn lưu các thay đổi vào tệp SCSS (trong Công cụ cho nhà phát triển hoặc nơi khác), trình biên dịch Sass sẽ tạo lại các tệp CSS. Sau đó, Công cụ cho nhà phát triển sẽ tải lại tệp CSS mới tạo.
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 Công cụ cho nhà phát triển:
- Mở about:flags trong Chrome.
- Bật chế độ Bật thử nghiệm của Công cụ cho nhà phát triển.
- Khởi động lại Chrome.
- Mở phần Cài đặt Công cụ cho nhà phát triển rồi nhấp vào Thử nghiệm.
- Bật Hỗ trợ dành cho Sass (hoặc Gỡ lỗi biểu định kiểu Sass, tùy 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 những thay đổi đối với tệp nguồn Sass của bạn 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 La bàn, xin lưu ý rằng La bàn 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ể sử dụng gỡ lỗi Sass bằng La bàn.
Cách thức hoạt động
Đối với mỗi tệp nguồn SCSS được 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 được biên dịch. Tệp bản đồ nguồn là tệp JSON xác định ánh xạ 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 đây:
<!-- 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ư thế này, 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à ví dụ về một tệp bản đồ nguồn:
{
"version": "3",
"mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
"sources": ["sass/styles.scss"],
"file": "styles.css"
}
Gỡ lỗi từ xa dễ dàng hơn trên Chrome dành cho Android
Một vài tính năng mới trong Công cụ cho nhà phát triển giúp việc gỡ lỗi từ xa trên Chrome dành cho Android dễ thiết lập hơn: tiện ích ADB và chuyển tiếp cổng đảo ngược.
Tiện ích ADB của Chrome giúp đơn giản hoá quá trình thiết lập tính năng gỡ lỗi từ xa. API này mang lại các lợi ích sau:
- Đóng 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 bắt đầu 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 đảo ngược giúp bạn dễ dàng kết nối Chrome trên Android với máy chủ web đang 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 của 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.
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 và sau đó nhấp vào Start 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 đã kết nối, nếu có.
Nhấp vào Xem thiết bị để mở trang about:inspect. Trang này 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 Công cụ cho nhà phát triển, 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 bất kỳ thiết bị nào được kết nối, hãy kiểm tra để chắc chắn rằng thiết bị của bạn đã được kết nối với USB và gỡ lỗi USB đã được bật trong cài đặt Chrome dành cho Android. Để biết thêm hướng dẫn chi tiết và các bước khắc phục sự cố, hãy xem 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 đang 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ị nằm 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ư khi bạn dùng mạng công ty bị hạn chế, việc này có thể không thực hiện được nếu không có một số thủ thuật DNS thông minh. Tính năng chuyển tiếp cổng ngược trong Chrome dành cho Android giúp bạn thực hiện việc này một cách đơn giản. Tính năng này hoạt động bằng cách tạo một cổng TCP nghe trên thiết bị để 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 của bạn.
Để sử dụng tính năng này, bạn sẽ cần:
- Chrome 28 trở lên được cài đặt trên máy phát triển của bạn
- Đã cài đặt Chrome dành cho Android Beta trên thiết bị của bạn
- Cầu gỡ lỗi Android (tiện ích ADB của Chrome hoặc SDK Android đầy đủ) được cài đặt trên máy phát triển của bạn
Để sử dụng tính năng chuyển tiếp cổng đảo 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 của mình.
Trước tiên, hãy bật tính năng chuyển tiếp cổng ngược:
- Mở Chrome trên máy phát triển của bạn.
- Trong about:flags, hãy bật Bật thử nghiệm của Công cụ cho nhà phát triển rồi khởi động lại Chrome.
- 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ở.
- Nhấp vào liên kết "kiểm tra" bên cạnh bất kỳ trang web nào được liệt kê.
- Trong cửa sổ Công cụ cho nhà phát triển mở ra, hãy mở bảng điều khiển Cài đặt.
- Trong Thử nghiệm, bật Bật chuyển tiếp cổng đảo ngược.
- Đóng cửa sổ Công cụ cho nhà phát triển và quay lại about:inspect.
Sau đó, hãy thêm quy tắc chuyển tiếp cổng:
- Nhấp lại vào đường liên kết "kiểm tra" để mở Công cụ cho nhà phát triển rồi mở lại phần Cài đặt Công cụ cho nhà phát triển.
- Nhấp vào thẻ Chuyển tiếp cổng.
- 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).
- Trong trường Target (Mục tiêu), hãy thêm số cổng nơi ứng dụng web của bạn đang chạy trên máy phát triển.
- Trong Chrome dành 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 do máy phát triển của mình phân phát.
Hình ảnh hoá 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ình bày trực quan về quá trình xử lý JavaScript theo thời gian, tương tự như chế độ xem trong bảng Dòng thời gian và bảng điều khiển Mạng.
Trục hoành là thời gian và trục tung là ngăn xếp lệnh gọi. Ở phía trên đầu bảng điều khiển là phần tổng quan hiển thị toàn bộ bản ghi và bạn có thể "Phóng to" một vùng của bản ghi bằng cách chọn vùng đó bằng chuột, như minh hoạ dưới đây. Tương ứng, phạm vi thời gian của chế độ xem chi tiết sẽ thu nhỏ.
Trong chế độ xem chi tiết, ngăn xếp lệnh gọi được thể hiện dưới dạng một ngăn xếp hàm "khối". Một khối nằm trên một khối khác được gọi bởi khối hàm thấp hơn. 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 đó:
- Tên – Tên hàm.
- Thời gian tự thực thi – Khoảng thời gian để hoàn tất lệnh gọi hiện tại của hàm, 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 để hoàn tất lệnh gọi hiện tại của hàm này và bất kỳ hàm nào mà hàm này gọi.
- Thời gian tự tổng hợp – Tổng thời gian cho tất cả lệnh gọi hàm trong quá trình ghi, không bao gồm các hàm do hàm này gọi.
- Tổng thời gian – Tổng thời gian cho tất cả lệnh gọi hàm, bao gồm cả các hàm do hàm này gọi.
Thao tác nhấp vào một khối hàm sẽ mở tệp JavaScript chứa trong bảng điều khiển Nguồn, tại dòng nơi hàm được xác định.
Cách sử dụng biểu đồ hình ngọn lửa:
- Trong Công cụ cho nhà phát triển, hãy nhấp vào thẻ Hồ sơ.
- Chọn Record JavaScript CPU profile (Ghi lại hồ sơ CPU JavaScript) rồi nhấp vào Start (Bắt đầu).
- Khi bạn thu thập xong dữ liệu, hãy nhấp vào Dừng.
- Trong chế độ xem hồ sơ, hãy chọn hình ảnh Flame Chart (Biểu đồ hình ngọn lửa).
Năm tính năng đo lường hiệu suất chính
Để hoàn thiện bản khảo sát này về những tiến bộ mang tính cách mạng trong Công cụ cho nhà phát triển, chúng tôi xin giới thiệu 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 Vẽ và đường viền lớp
- Định mức FPS (khung hình/giây)
- Tìm bố cục đồng bộ bắt buộc (lỗi bố cục)
- 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 lựa chọn trong phần Cài đặt của Công cụ cho nhà phát triển (Hiển thị > Bật tính năng vẽ lại trang liên tục) giúp bạn xác định chi phí hiển thị của các phần tử hoặc kiểu CSS riêng lẻ.
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ỉ vẽ những vùng của 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ột màn hình hiển thị hỗ trợ hiển thị thời gian cần thiết cho Chrome để hiển thị trang, cũng như khoảng thời gian và biểu đồ hiển thị việc phân phối các thời gian hiển thị gần đây. Đường ngang trên biểu đồ cho biết mốc 16,6 mili giây.
Lợi ích của việc sử dụng phần tử này là bạn có thể sử dụng 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 vô hiệu hoá kiểu CSS của một phần tử. Bạn có thể xem lượng thời gian mà một phần tử hoặc kiểu thêm vào trang hiển thị "trọng số" (nếu có) bằng cách nhận thấy những thay đổi đối với thời gian hiển thị trang. Nếu việc ẩn một phần tử giúp giảm đáng kể thời gian hiển thị, thì bạn cần phải tập trung vào việc tạo kiểu hoặc xây dựng phần tử đó.
Để bật chế độ đau liên tục:
- Mở phần Cài đặt Công cụ cho nhà phát triển. 1.Trên thẻ Chung, trong phần Hiển thị, hãy bật tuỳ chọn Bật tính năng vẽ lại trang liên tục.
Để biết thêm thông tin, hãy xem bài viết Phân tích thời gian hiển thị dài bằng chế độ vẽ liên tục của Công cụ cho nhà phát triển.
Hiển thị màu vẽ hình chữ nhật và đường viền lớp
Một lựa chọn khác trong Công cụ cho nhà phát triển là hiển thị những vùng hình chữ nhật của màn hình đang được vẽ lên. (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 vẽ đang được vẽ trên vùng đang á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ì đó là một phần tương đối nhỏ của màn hình.
Bạn muố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 bị vẽ lại. Ví dụ: trong ảnh chụp màn hình sau đây, người dùng đang cuộn trang. Một hình chữ nhật vẽ xung 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ử nội dung. Vị trí hình ảnh được đặt thành cố định trong CSS, do đó, Chrome phải vẽ lại toàn bộ trang mỗi lần cuộn.
Định mức FPS (khung hình/giây)
Chỉ số khung hình/giây cho thấy 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 đồ dạng cột cho biết tốc độ khung hình theo thời gian và biểu đồ cho thấy sự thay đổi về tốc độ khung hình.
Cách hiện chỉ số FPS:
- Mở phần Cài đặt Công cụ cho nhà phát triển.
- Nhấp vào Chung.
- Trong phần Kết xuất, hãy bật tuỳ chọn Buộc kết hợp tăng tốc và Hiện đồng hồ đo FPS.
Bạn có thể buộc chỉ số FPS (khung hình/giây) luôn xuất hiện bằng cách mở about:flags, bật bộ đếm FPS rồi khởi động lại Chrome.
Tìm bố cục đồng bộ bắt buộc (lỗi bố cục)
Để tối đa hoá hiệu suất hiển thị, Chrome thường tạo lô cho các thay đổi về bố cục do ứng dụng của bạn yêu cầu và lên lịch chuyển bố cục để tính toán và hiển thị không đồng bộ các thay đổi được yêu cầu. Tuy nhiên, nếu ứng dụng yêu cầu giá trị của thuộc tính phụ thuộc vào bố cục (chẳng hạn như offsetHeight hoặc offsetWidth), thì Chrome sẽ buộc phải thực hiện bố cục trang ngay lập tức và đồng bộ. Những lệnh gọi này được gọi là bố cục đồng bộ bắt buộc có thể làm giảm đáng kể hiệu suất kết xuất, đặc biệt là khi được thực hiện nhiều lần trên các cây DOM lớn. Tình huống này còn được gọi là "lỗi bố cục".
Tính năng ghi Dòng thời gian sẽ cảnh báo bạn khi phát hiện thấy bố cục đồng bộ bắt buộc với 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 của mã đã làm mất hiệu lực của bố cục và mã buộc phải có bố cục.
Cửa sổ bật lên này cũng cho biết số nút cần có 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.
Xem Bản minh hoạ tiến trình: 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 quá trình phân bổ đối tượng là một loại hồ sơ bộ nhớ mới cho thấy quá trình phân bổ theo thời gian. Khi bạn bắt đầu theo dõi phân bổ, Công cụ cho nhà phát triển 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 nơi các đối tượng đang được tạo và xác định đường dẫn giữ lại.
Cách theo dõi mức phân bổ cho đối tượng:
- Trong Công cụ cho nhà phát triển, hãy nhấp vào thẻ Hồ sơ.
- 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).
- Khi bạn thu thập xong dữ liệu, hãy nhấp vào Stop recording 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 lập hồ sơ).
Lập hồ sơ 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á. Lập hồ sơ canvas cho phép bạn ghi và phát các cuộc 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 cuộc gọi hoặc nhóm cuộc gọi WebGL và xem kết quả được kết xuất. Bạn cũng sẽ thấy thời gian cần để phát lại các cuộc gọi đó.
Cách sử dụng tính năng lập hồ sơ canvas:
- Bật tính năng Kiểm tra canvas trên thẻ Thử nghiệm trong phần cài đặt 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ụ dành cho nhà phát triển rồi khởi động lại Chrome.)
- Nhấp vào thẻ Hồ sơ.
- Chọn Chụp khung ảnh rồi nhấp vào Chụp nhanh.
- Giờ đây, bạn có thể khám phá các cuộc gọi dùng để tạo khung canvas.
