Google I/O 2016 đã kết thúc. DevTools đã có sự hiện diện mạnh mẽ tại I/O, bao gồm cả một cuộc trò chuyện của Paul Bakaus, Paul Irish và Seth Thompson trình bày về tương lai của DevTools. Hãy xem video bên dưới hoặc đọc tiếp để tìm hiểu thêm về định hướng của Công cụ cho nhà phát triển trong năm 2016 và sau này.
Hoạt động ghi nhận quyền tác giả
DevTools hướng đến việc giúp mọi giai đoạn trong vòng đời phát triển web trở nên dễ dàng hơn. Có thể bạn đã biết rằng Công cụ cho nhà phát triển có thể giúp bạn gỡ lỗi hoặc phân tích trang web, nhưng bạn có thể không biết cách sử dụng công cụ này để tạo trang web. "Tạo" ở đây có nghĩa là hành động tạo trang web. Một trong những mục tiêu trong tương lai gần là giúp bạn dễ dàng lặp lại, thử nghiệm và mô phỏng trang web trên nhiều thiết bị.
Chế độ thiết bị
Nhóm Công cụ cho nhà phát triển tiếp tục lặp lại trải nghiệm Chế độ thiết bị, trải nghiệm này đã được nâng cấp lớn lần đầu tiên trong Chrome 49. Hãy xem bài đăng vào tháng 3 (Chế độ thiết bị mới cho thế giới ưu tiên thiết bị di động) để biết thông tin tổng quan về các nội dung cập nhật. Mục tiêu tổng thể là cung cấp quy trình làm việc liền mạch để xem và mô phỏng trang web của bạn trên tất cả các kiểu dáng thiết bị.
Sau đây là thông tin tóm tắt nhanh về một số nội dung cập nhật của Chế độ thiết bị đã ra mắt trong Canary kể từ khi chúng tôi đăng bài viết vào tháng 3.
Khi xem một trang dưới dạng một thiết bị cụ thể, bạn có thể đắm mình hơn vào trải nghiệm bằng cách hiển thị phần cứng của thiết bị xung quanh trang.
Trình đơn hướng thiết bị cho phép bạn xem trang khi các thành phần giao diện người dùng hệ thống khác nhau (chẳng hạn như thanh điều hướng và bàn phím) đang hoạt động.
Cũng có những điểm cải tiến đối với Story trên máy tính. Nhờ tính năng thu phóng của Chế độ thiết bị, bạn có thể mô phỏng màn hình máy tính lớn hơn màn hình mà bạn đang thực sự làm việc, chẳng hạn như màn hình 4K (3840px x 2160px).
Bạn có thể điều tiết mạng ngay từ giao diện người dùng Chế độ thiết bị, thay vì phải chuyển sang bảng điều khiển Mạng.
Điểm khác biệt về nguồn
Khi lặp lại kiểu của một trang web, bạn có thể dễ dàng mất dấu các thay đổi. Để khắc phục vấn đề này, Công cụ cho nhà phát triển sẽ sử dụng các tín hiệu hình ảnh trên rãnh số dòng của bảng điều khiển Nguồn để giúp bạn theo dõi các thay đổi. Các dòng đã xoá được biểu thị bằng một đường màu đỏ, các dòng đã sửa đổi được đánh dấu bằng màu tím và các dòng mới được đánh dấu bằng màu xanh lục.
Bạn cũng có thể theo dõi các thay đổi trong thẻ ngăn Nguồn nhanh mới:
Lần đầu tiên, thẻ Quick Source (Nguồn nhanh) cho phép bạn tập trung vào mã nguồn HTML hoặc JavaScript cùng với các quy tắc CSS. Ngoài ra, khi bạn nhấp vào một thuộc tính CSS trong ngăn Styles (Kiểu), thẻ Quick Source (Nguồn nhanh) sẽ tự động chuyển đến và làm nổi bật định nghĩa trong nguồn.
Hãy bật thử nghiệm sources diff (so sánh nguồn) trong Chrome Canary để dùng thử ngay hôm nay.
Chỉnh sửa Sass trực tiếp
Sau đây là một số điểm cải tiến lớn sắp tới đối với quy trình chỉnh sửa Sass. Những tính năng này đang ở giai đoạn thử nghiệm ban đầu. Chúng tôi sẽ thông báo cho bạn trong một bài đăng sau này khi các tính năng này đã sẵn sàng để bạn dùng thử.
Về cơ bản, DevTools sẽ cho phép bạn xem và chỉnh sửa các biến Sass như bạn luôn mong muốn. Nhấp vào một giá trị được biên dịch từ biến Sass và thẻ Quick Sources (Nguồn nhanh) mới sẽ chuyển đến phần định nghĩa của biến đó.
Khi chỉnh sửa một giá trị được biên dịch từ biến Sass, nội dung chỉnh sửa của bạn sẽ cập nhật biến Sass, chứ không chỉ thuộc tính riêng lẻ mà bạn đã chọn.
Ứng dụng web tiến bộ
Hãy xem danh sách buổi nói chuyện về web và Chrome tại Google I/O 2016, bạn sẽ thấy một chủ đề lớn đang nổi lên trong thế giới phát triển web: Ứng dụng web tiến bộ.
Khi mô hình Ứng dụng web tiến bộ xuất hiện, Công cụ của Chrome cho nhà phát triển đang lặp lại nhanh chóng để cung cấp các công cụ mà nhà phát triển cần để tạo ra các ứng dụng web tiến bộ tuyệt vời. Chúng tôi nhận thấy rằng việc xây dựng và gỡ lỗi các ứng dụng hiện đại này thường đi kèm với các yêu cầu riêng biệt, vì vậy, DevTools đã dành toàn bộ một bảng điều khiển cho việc phát triển Ứng dụng web tiến bộ. Mở Chrome Canary và bạn sẽ thấy bảng điều khiển Tài nguyên đã được thay thế bằng bảng điều khiển Ứng dụng. Tất cả chức năng trước đây trong bảng điều khiển Tài nguyên vẫn còn. Chỉ có một vài ngăn mới được thiết kế dành riêng cho việc phát triển Ứng dụng web tiến bộ:
Ngăn Tệp kê khai cung cấp cho bạn bản trình bày trực quan về tệp kê khai ứng dụng. Tại đây, bạn có thể kích hoạt quy trình công việc "Thêm vào màn hình chính" theo cách thủ công.
Ngăn Trình chạy dịch vụ cho phép bạn kiểm tra và tương tác với trình chạy dịch vụ đã đăng ký cho trang hiện tại.
Ngăn Xoá bộ nhớ cho phép bạn xoá mọi loại dữ liệu để có thể xem một trang trống.
JavaScript
Việc vượt qua ranh giới giữa giao diện người dùng và phần phụ trợ là một phần khó khăn trong quá trình phát triển web toàn diện. Nếu phát hiện thấy phần phụ trợ đang trả về mã trạng thái 500 trong khi gỡ lỗi ứng dụng web, thì bạn đã đạt đến giới hạn hữu ích của DevTools, yêu cầu bạn thay đổi ngữ cảnh và khởi động môi trường phát triển phụ trợ để gỡ lỗi vấn đề.
Tuy nhiên, với các phần phụ trợ được viết bằng Node.js, ranh giới giữa phần phụ trợ và phần phụ trợ đang bắt đầu mờ dần. Vì Node.js chạy trên công cụ JavaScript V8 (cũng là công cụ hỗ trợ Google Chrome), nên chúng tôi muốn cho phép gỡ lỗi Node.js từ Công cụ dành cho nhà phát triển. Nhờ V8, DevTools và Google Cloud Platform dành cho các nhóm Node.js, giờ đây, bạn có thể sử dụng tất cả các tính năng gỡ lỗi mạnh mẽ của DevTools để tự kiểm tra một ứng dụng Node.js. Chức năng này đã được đưa vào các bản dựng hằng đêm của Node.js, mặc dù việc tích hợp DevTools vẫn đang được hoàn thiện trước khi đưa vào một bản phát hành chính. Một ngày nào đó, việc gỡ lỗi ứng dụng Node.js từ DevTools sẽ đơn giản như việc truyền node --inspect app.js và kết nối từ DevTools trong bất kỳ cửa sổ Chrome nào.
Mặc dù các công cụ hiện có như Node Inspector (Trình kiểm tra nút) cung cấp trải nghiệm gỡ lỗi dựa trên giao diện người dùng đồ hoạ, nhưng tính năng tích hợp DevTools Node.js mới sẽ luôn cập nhật các tính năng gỡ lỗi mới nhất của DevTools, chẳng hạn như gỡ lỗi ngăn xếp không đồng bộ, đóng hộp đen và hỗ trợ ES6.