Chrome DevTools phát triển nhanh chóng và chúng tôi muốn bạn chú ý đến một số chức năng mới cũng như các điểm cải tiến mà chúng tôi đã giới thiệu cho một số thành phần. Cụ thể, chúng ta sẽ thảo luận về một số thay đổi đối với giao diện người dùng, hoạt động phân tích tài nguyên JS có độ phân giải cao và các tính năng mới của Workspace.
- Tính năng phân tích tài nguyên có độ phân giải cao hiện có độ chính xác đến 0,1 mili giây
- Thanh công cụ đã chuyển lên đầu Devtools và Overrides đã chuyển sang ngăn bảng điều khiển
- Workspaces đã thêm một số tính năng để hỗ trợ việc thêm/xoá/tìm kiếm tệp
Phân tích tài nguyên có độ phân giải cao
Phân tích CPU là một tính năng khá hữu ích để xem JavaScript của bạn hiệu quả như thế nào. Ngoài các chế độ xem hồ sơ truyền thống, chúng tôi đã ra mắt Biểu đồ hình ngọn lửa vào mùa hè này. Biểu đồ này thể hiện trực quan quá trình xử lý JavaScript của trang theo thời gian. Bạn có thể dùng tính năng này để dễ dàng xem độ sâu của ngăn xếp lệnh gọi cũng như thời gian xử lý của từng hàm.
Cho đến gần đây, cả biểu đồ truyền thống dạng nặng (từ dưới lên) và dạng cây (từ trên xuống), cũng như Biểu đồ hình ngọn lửa, sẽ chỉ hiển thị các quy trình có độ chính xác đến 1 mili giây. Đối với hầu hết các ứng dụng, điều này là ổn. Tuy nhiên, nếu bạn đang làm việc trên một nội dung mà tốc độ thực sự quan trọng trong giao diện người dùng, chẳng hạn như trò chơi, thì độ phân giải 1 mili giây có thể quá lớn để có được kết quả có ý nghĩa về nguyên nhân khiến trang web của bạn bị chậm hoặc giao diện người dùng có vẻ bị giật. Cách bật tính năng Phân tích tài nguyên có độ phân giải cao (hiện chỉ có trên Canary):
- Mở phần Cài đặt DevTools.
- Trên thẻ Chung, trong mục Trình phân tích tài nguyên, hãy bật tuỳ chọn Phân tích CPU có độ phân giải cao.
Dưới đây là ví dụ về Biểu đồ hình ngọn lửa trong hoạt động phân tích tài nguyên thông thường và có độ phân giải cao, trong đó chúng ta phân tích tài nguyên khi tải trang chủ HTML5Rocks.com:
Với độ phân giải phân tích tài nguyên thông thường, thời gian xử lý luôn được làm tròn lên đến mili giây tiếp theo, vì vậy, một quy trình chỉ mất 0,1 mili giây trở xuống vẫn được báo cáo là mất 1,0 mili giây và các quy trình khác có thể hoàn toàn không xuất hiện trong ngăn xếp lệnh gọi.
Tính năng phân tích tài nguyên có độ phân giải cao gây ra hao tổn lớn trong máy ảo JavaScript, đó là lý do tính năng này bị tắt theo mặc định. Mặc dù chắc chắn trông sẽ bắt mắt hơn độ phân giải phân tích tài nguyên thông thường, nhưng bạn chỉ nên sử dụng độ phân giải này nếu thực sự cần độ chính xác.
Cải tiến giao diện người dùng của Công cụ cho nhà phát triển
Mặc dù Canary luôn có những tính năng mới, nhưng chúng tôi muốn bạn chú ý đến một vài thay đổi lớn đối với giao diện người dùng: Các nút di chuyển lên đầu giao diện người dùng nói chung, bảng điều hướng và thông tin theo dòng thời gian, cũng như việc di chuyển tính năng Ghi đè sang Ngăn điều khiển.
Trước tiên, hãy cùng xem chúng ta đang ở đâu. Vì chúng ta đang nói về Dòng thời gian, nên tôi sẽ cố gắng giải quyết hai vấn đề đầu tiên bằng một cặp ảnh chụp màn hình. Dưới đây là giao diện của Dòng thời gian trong Chrome (phiên bản ổn định) hiện tại:
Dưới đây là giao diện của Dòng thời gian hiện tại.
Hãy lưu ý những điều sau:
- Các thanh công cụ và nút đều nằm ở đầu màn hình, cả các thanh công cụ Timeline cụ thể ở bên trái và các thanh công cụ DevTools chung ở bên phải.
- Các bản ghi Dòng thời gian hiện có cấu trúc lồng nhau trong bảng điều khiển ở bên trái và bạn thậm chí có thể sử dụng bàn phím để cuộn qua các bản ghi đó. Ngoài việc sử dụng các phím lên và xuống để cuộn lên và xuống, bạn cũng có thể sử dụng các phím trái và phải để mở và đóng các bản ghi lồng nhau.
- Thông tin chi tiết về thời gian hiện hiển thị trong một bảng điều khiển ở bên phải cho bất kỳ mục nhập nào bạn đã chọn. (Bạn cũng có thể di chuột qua các mục khác để xem thông tin của các mục đó.)
Bây giờ, hãy xem ngăn bảng điều khiển. Để mở ngăn bảng điều khiển, hãy nhấn phím Esc trong DevTools hoặc nhấn nút ngăn bảng điều khiển 
và ngăn sẽ cuộn lên từ dưới cùng.
Theo mặc định, bạn sẽ có các thẻ Console (Bảng điều khiển) và Search (Tìm kiếm) ở đó. Để truy cập vào chức năng trước đây gọi là Ghi đè, hãy mở phần cài đặt DevTools rồi đánh dấu vào ô bên cạnh "Hiển thị chế độ xem "Mô phỏng" trong ngăn bảng điều khiển". Đóng hộp cài đặt và bạn sẽ thấy thẻ Emulation (Mô phỏng) trong ngăn bảng điều khiển như ảnh chụp màn hình sau:
Và bạn có thể thực hiện tất cả các hoạt động mô phỏng ở đó.
Lý do của thay đổi này là trước đây, bạn phải vào và ra khỏi phần Cài đặt để thay đổi các chế độ ghi đè mô phỏng, sau đó quay lại và xem trang của mình. Giờ đây, bạn có thể thay đổi các chế độ ghi đè mô phỏng trong khi vẫn thao tác với các kiểu.
Cải tiến Không gian làm việc
Cụ thể, Workspaces là một tính năng có thể đơn giản hoá quy trình tạo nội dung của bạn khá nhiều, nhưng tính năng này lại không được yêu thích như đáng lẽ phải được. Với Workspaces, thay vì thử nghiệm và thực hiện thay đổi trong DevTools rồi phải sao chép và dán các thay đổi đó trở lại tệp nguồn, bạn có thể thực hiện thay đổi trong DevTools, xem các thay đổi đó được hiển thị trong trình duyệt và lưu các thay đổi đó vào phiên bản cục bộ ổn định của tệp – tất cả đều không cần rời khỏi Chrome.
Nếu bạn chưa đọc bài viết Công cụ cho nhà phát triển Chrome: Cuộc cách mạng năm 2013, hãy xem bài viết đó rồi quay lại đây để tìm hiểu cách chúng tôi cải thiện các tính năng đó trong vài tháng qua.
Thêm tệp dễ dàng hơn
Vào thời điểm bài viết về Revolutions 2013, để tạo một không gian làm việc mới, bạn cần thêm thư mục vào không gian làm việc rồi liên kết thư mục đó với một tài nguyên mạng. Chúng tôi đã đơn giản hoá quy trình này thành một bước duy nhất: Bạn chỉ cần nhấp chuột phải vào bảng điều khiển Nguồn ở bên trái rồi chọn Thêm thư mục vào không gian làm việc. Thao tác này sẽ đưa bạn đến một hộp thoại tệp, nơi bạn có thể chọn một thư mục mới để thêm vào Không gian làm việc. (Thao tác này không thêm thư mục hiện đang được làm nổi bật vào Không gian làm việc của bạn.)
Tạo và xoá tệp
Giờ đây, bạn có thể thêm tệp mới vào thư mục cục bộ mà bạn đang sử dụng cho Workspaces trong chính Workspaces. Bạn chỉ cần nhấp chuột phải vào một thư mục trong bảng điều khiển Nguồn ở bên trái rồi chọn New File (Tệp mới).
Bạn cũng có thể xoá tệp trong Workspaces. Nhấp chuột phải vào một tệp trong bảng điều khiển Nguồn ở bên trái rồi chọn Delete File (Xoá tệp).
Bạn cũng có thể sao chép tệp bằng cách chọn Sao chép tệp.
Làm mới
Giờ đây, bạn có thể tạo tệp mới (hoặc xoá tệp) ngay trong không gian làm việc. Thư mục Nguồn cũng sẽ tự động làm mới và hiển thị các tệp mới này. Nếu không, bạn luôn có thể nhấp chuột phải vào một thư mục rồi chọn Refresh (Làm mới) trong trình đơn bật lên để buộc làm mới.
Điều này cũng hữu ích nếu bạn thay đổi các tệp đang mở trong một trình chỉnh sửa khác và muốn các thay đổi đó xuất hiện trong DevTools.
Tìm kiếm trên các tệp
Chúng tôi đã tinh chỉnh một chút giao diện để tìm kiếm trên các tệp. Giờ đây, bạn cũng có thể tìm kiếm chuỗi trên tất cả các tệp trong không gian làm việc cũng như tất cả các tệp được tải vào DevTools. Bạn có thể tìm kiếm một chuỗi hoặc một biểu thức chính quy và chúng tôi sẽ so khớp mọi lần xuất hiện trong mọi tệp hoặc trang. Cách tìm kiếm nhiều tệp trong Workspaces (hiện có trong Canary):
- Mở ngăn bảng điều khiển bằng cách nhấn phím Escape, rồi nhấp vào thẻ Search (Tìm kiếm) bên cạnh Console (Bảng điều khiển) để mở cửa sổ Tìm kiếm
HOẶC
Nhấn Ctrl + Shift + F (Cmd + Opt + F trên máy Mac) để mở cửa sổ Tìm kiếm.
- Nhập cụm từ tìm kiếm vào hộp Search Sources (Nguồn tìm kiếm) rồi nhấn Enter. Nếu truy vấn của bạn là một biểu thức chính quy hoặc cần không phân biệt chữ hoa chữ thường, hãy nhấp vào hộp thích hợp.
Danh sách bỏ qua
Việc tìm kiếm qua văn bản của tệp hoặc lọc qua tên tệp có thể rất tẻ nhạt nếu bạn có hàng tá tệp .git hoặc tệp README.md làm rối kết quả.
Do đó, chúng tôi đã thêm tính năng danh sách bỏ qua vào Workspaces để bạn có thể loại trừ một số loại tệp hoặc thư mục nhất định khi xem và tìm kiếm không gian làm việc.
Sau đây là cách xem và thay đổi danh sách bỏ qua dùng chung hiện tại trong Workspaces:
- Mở phần Cài đặt của Công cụ của Chrome cho nhà phát triển.
- Nhấp vào Không gian làm việc.
- Trong phần Common (Phổ biến), trong hộp Folder exclude pattern (Mẫu loại trừ thư mục), bạn có thể xem và/hoặc chỉnh sửa các mẫu.
Chúng tôi cung cấp các mẫu loại trừ chung mặc định sau:
Biểu thức chính quy này loại trừ siêu dữ liệu từ Git, SVN, Mercurial, tệp dự án từ Eclipse và IntelliJ, tệp OS X DS_Store và Thùng rác, cũng như một số nội dung khác đáng bỏ qua như bộ nhớ đệm từ Sass. Toàn bộ thư mục của họ, bao gồm cả mọi thư mục con, sẽ bị loại trừ khỏi giao diện người dùng để không xuất hiện trong giao diện người dùng và không xuất hiện khi tìm kiếm qua các tệp.
Danh sách bỏ qua dành riêng cho Workspace
Để tìm kiếm cụ thể hơn, bạn cũng có thể chọn loại trừ các tệp và thư mục trong một không gian làm việc cụ thể để giảm tình trạng lộn xộn trong kết quả tìm kiếm. Các thư mục bị loại trừ cũng sẽ không xuất hiện trong thư mục nguồn.
Để loại trừ toàn bộ thư mục khỏi không gian làm việc, hãy nhấp chuột phải vào thư mục đó trong bảng điều khiển Nguồn ở bên trái rồi chọn Loại trừ thư mục. Cách xem các mối liên kết và thư mục bị loại trừ cho một thư mục không gian làm việc nhất định:
- Mở phần Cài đặt DevTools.
- Nhấp vào Không gian làm việc.
- Đánh dấu thư mục mà bạn quan tâm.
- Nhấp vào Chỉnh sửa, cửa sổ "Chỉnh sửa hệ thống tệp" sẽ xuất hiện; bạn có thể thêm hoặc xoá các mối liên kết và/hoặc thư mục bị loại trừ khỏi cửa sổ này.
