Công cụ của Chrome cho nhà phát triển hoạt động nhanh chóng và chúng tôi muốn bạn chú ý đến một số chức năng và điểm cải tiến mới mà chúng tôi đã giới thiệu với một vài 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, cấu hình JS có độ phân giải cao và các tính năng mới của Workspace.
- Hiện tại, chế độ phân tích tài nguyên có độ phân giải cao đạt độ chính xác là 0,1 mili giây
- Thanh công cụ được chuyển lên đầu trong Devtools và Ghi đè được chuyển đến ngăn bảng điều khiển
- Workspace đã bổ sung một số tính năng để hỗ trợ việc thêm/xoá/tìm tệp
Phân tích độ phân giải cao
Phân tích CPU là một tính năng khá hữu ích để xem mức độ hiệu quả của JavaScript. Ngoài chế độ xem hồ sơ truyền thống, chúng tôi đã giới thiệu Biểu đồ hình ngọn lửa trong mùa hè này, biểu thị trực quan quá trình xử lý JavaScript của một trang theo thời gian. Bạn có thể dùng công cụ này để dễ dàng xem mức độ diễn ra của ngăn xếp lệnh gọi cũng như thời gian xử lý từng hàm riêng lẻ.
Cho đến gần đây, cả cách trình bày Nặng (Từ dưới lên) và Cây (từ trên xuống) truyền thống, cũng như Biểu đồ ngọn lửa đều 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à bình thường. Tuy nhiên, nếu bạn đang thực hiện một nhiệm vụ nào đó 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ể là quá nhỏ để nhận được kết quả có ý nghĩa vì những gì khiến trang web của bạn chậm hoặc giao diện người dùng có vẻ chậm. Cách bật tính năng Phân tích độ phân giải cao (hiện chỉ có ở Canary):
- Mở phần Cài đặt Công cụ cho nhà phát triển.
- Trên thẻ General (Chung), trong Profiler (Trình phân tích tài nguyên), hãy bật High độ phân giải CPU profiling (Lập hồ sơ CPU độ phân giải cao).
Dưới đây là ví dụ về Biểu đồ hình ngọn lửa được hiển thị trong cấu hình bình thường và có độ phân giải cao, nơi chúng tôi phân tích tài nguyên tải trang chủ HTML5Rocks.com:
Với độ phân giải lập hồ sơ bình 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 mili giây và các quy trình khác có thể hoàn toàn không được hiển thị trong ngăn xếp lệnh gọi.
Việc phân tích tài nguyên độ phân giải cao có mức 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ù độ phân giải này trông đẹp hơn so với độ 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 nếu thực sự cần độ chính xác.
Các điểm cải tiến trên giao diện người dùng cho Devtools
Mặc dù Canary luôn có những tính năng mới được ra mắt trong Canary, nhưng chúng tôi muốn bạn lưu ý đến một số thay đổi quan trọng đối với giao diện người dùng: Các nút nằm ở đầu giao diện người dùng nói chung, bảng điều hướng và bảng thông tin trên Dòng thời gian cũng như việc di chuyển vị trí của Ghi đè đối với Ngăn bảng điều khiển.
Trước tiên, hãy xem nguồn lực của chúng tôi. Vì chúng ta vẫn đang nói về Dòng thời gian, nên tôi sẽ cố gắng tiêu diệt hai chú chim đầu tiên bằng một cặp ảnh chụp màn hình. Dòng thời gian hiện tại sẽ có giao diện như sau trong Chrome (ổn định):
Dòng thời gian hiện tại sẽ có giao diện như sau.
Hãy lưu ý những điều sau:
- Thanh công cụ và nút hiện đều nằm ở đầu màn hình, cho cả các nút và Dòng thời gian cụ thể ở bên trái và Công cụ cho nhà phát triển nói chung ở bên phải.
- Các bản ghi Dòng thời gian hiện có cấu trúc lồng trong bảng điều khiển ở bên trái và thậm chí bạn có thể sử dụng bàn phím để cuộn qua các bản ghi đó. Ngoài việc sử dụng phím mũi tên lên và xuống để cuộn lên và xuống, bạn cũng có thể sử dụng phím trái và phải để mở và đóng các bản ghi lồng nhau.
- Giờ đây, thông tin chi tiết về thời gian sẽ hiển thị trong một bảng điều khiển ở bên phải cho bất kỳ mục 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 về các mục đó.)
Giờ hãy cùng xem ngăn bảng điều khiển. Để mở ngăn bảng điều khiển, hãy nhấn phím Escape từ trong Công cụ cho nhà phát triển hoặc nhấn vào nút ngăn bảng điều khiển 
và ngăn kéo lên từ dưới cùng.
Theo mặc định, bạn sẽ thấy các thẻ Bảng điều khiển và Tìm kiếm trong đó. Để sử dụng chức năng trước đây gọi là Ghi đè, hãy mở phần cài đặt Công cụ cho nhà phát triển rồi đánh dấu vào hộp 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ẻ Mô phỏng trong ngăn bảng điều khiển như ảnh chụp màn hình dưới đây:
Bạn có thể thực hiện mọi công việc mô phỏng ở đó.
Lý do của sự thay đổi này là trước đây, bạn phải truy cập vào và ra khỏi phần Cài đặt để thay đổi 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.
Không gian làm việc được cải tiến
Workspace cụ thể là một tính năng có thể đơn giản hoá quy trình biên soạn nội dung. Tuy nhiên, tính năng này chưa được nhiều người yêu thích. Với Không gian làm việc, thay vì thử nghiệm và thực hiện thay đổi trong Công cụ cho nhà phát triển và 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 Công cụ cho nhà phát triển, xem chúng hiển thị trong trình duyệt và lưu chúng vào phiên bản tệp cục bộ ổn định mà không cần rời khỏi Chrome.
Nếu bạn chưa đọc bài viết Cách mạng Công cụ dành cho nhà phát triển Chrome năm 2013, hãy tiếp tục xem qua bài viết đó rồi quay lại đây để tìm hiểu cách chúng tôi cải thiện những tính năng đó trong vài tháng qua.
Thêm tệp dễ dàng hơn
Tại thời điểm đăng bài viết về Cách mạng năm 2013, bạn cần thêm thư mục vào không gian làm việc mới để tạo không gian làm việc mới, sau đó ánh xạ thư mục này đến 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. Tại đây, bạn có thể chọn một thư mục mới để thêm vào Không gian làm việc của mình. (Thao tác này không thêm thư mục đang được đánh dấu 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 các tệp mới vào thư mục cục bộ mà bạn đang sử dụng cho các Workspace trong chính Workspace. Chỉ cần 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 Tệp mới.
Bạn cũng có thể xoá tệp từ trong Không gian làm việc. 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 Xoá tệp.
Bạn cũng có thể sao chép một tệp bằng cách chọn Tệp trùng lặ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ị những 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 Làm mới trong trình đơn bật lên để buộc làm mới.
Cách này cũng hữu ích nếu bạn vô tình 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 Công cụ cho nhà phát triển.
Tìm kiếm trên các tệp
Chúng tôi đã tinh chỉnh giao diện tìm kiếm trên các tệp một chút và 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ủa mình cũng như tất cả các tệp được tải vào Công cụ cho nhà phát triển. Bạn có thể tìm kiếm một chuỗi hoặc một biểu thức chính quy, chúng tôi sẽ 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 Không gian làm việc (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ẻ Tìm kiếm bên cạnh Bảng điều khiển để mở cửa sổ Tìm kiếm
OR
Nhấn Ctrl + Shift + F (Cmd + Opt + F trên máy Mac) để mở cửa sổ Tìm kiếm.
- Nhập truy vấn của bạn vào hộp Nguồn tìm kiếm và 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 các tệp hoặc lọc qua tên tệp có thể rất tẻ nhạt nếu bạn có quá nhiều tệp .git hoặc tệp README.md làm lộn xộn kết quả của bạn.
Vì vậy, chúng tôi đã thêm tính năng danh sách bỏ qua vào Không gian làm việc để 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 của mình.
Sau đây là cách xem và thay đổi danh sách bỏ qua được chia sẻ hiện tại trong Không gian làm việc:
- Mở phần Cài đặt Công cụ cho nhà phát triển.
- Nhấp vào Không gian làm việc.
- Trong phần Phổ biến, trong ô 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 gửi kèm 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 khỏi các tệp dự án Git, SVN, Mercurial, từ các tệp Eclipse và IntelliJ, 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 khỏi Sass). Toàn bộ thư mục của các ứng dụng đó, 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 trong các tệp.
Danh sách bỏ qua dành riêng cho Workspace
Để cụ thể hơn, bạn cũng có thể chọn loại trừ tệp và thư mục bên trong không gian làm việc cụ thể của mình để giảm sự lộn xộn trong tìm kiếm. Các thư mục bị loại trừ sẽ không hiển thị trong thư mục nguồn.
Để loại trừ toàn bộ thư mục khỏi không gian làm việc của bạn, 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 và chọn Loại trừ thư mục. Để xem các 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 công cụ cho nhà phát triển.
- Nhấp vào Không gian làm việc.
- Đánh dấu thư mục bạn quan tâm.
- Nhấp vào Chỉnh sửa và cửa sổ "Chỉnh sửa hệ thống tệp" xuất hiện; bạn có thể thêm hoặc xoá các ánh xạ và/hoặc thư mục bị loại trừ khỏi cửa sổ này.
