Chúng tôi đã khép lại Google I/O 2016. Công cụ cho nhà phát triển có sự hiện diện mạnh mẽ tại I/O, trong đó có bài nói chuyện của Paul Bakaus, Paul Ireland và Seth Thompson về tương lai của Công cụ cho nhà phát triển. Hãy xem video bên dưới hoặc đọc tiếp để tìm hiểu thêm về mục tiêu của Công cụ cho nhà phát triển trong năm 2016 trở đi.
Hoạt động ghi nhận quyền tác giả
Công cụ cho nhà phát triển hướng đến việc làm cho mọi giai đoạn trong vòng đời phát triển web trở nên dễ dàng hơn. Bạn có thể biết rằng Công cụ cho nhà phát triển có thể giúp bạn gỡ lỗi hoặc lập hồ sơ cho một trang web, nhưng có thể bạn chưa biết cách sử dụng công cụ này để giúp tạo ra một trang web. "Tác giả" ở đây có nghĩa là hành động tạo ra một trang web. Một trong những mục tiêu sắp tới 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 của bạn 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ị. Đây là bản nâng cấp lớn đầu tiên trong Chrome 49. Hãy xem bài đăng từ 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 chung là cung cấp một 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 hệ số hình dạng.
Sau đây là phần tóm tắt ngắn gọn về một số bản cập nhật Chế độ thiết bị đã có trên Canary kể từ khi chúng tôi đăng bài viết này vào tháng 3.
Khi xem trang dưới dạng thiết bị cụ thể, bạn có thể đắm chìm hơn trong trải nghiệm này bằng cách hiển thị phần cứng 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 trê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âu chuyện trên máy tính để bàn cũng đã được cải thiện. 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ự đang 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.
Sự khác biệt về nguồn
Khi bạn lặp lại kiểu của một trang web, bạn sẽ dễ mất dấu các thay đổi của mình. Để khắc phục vấn đề này, Công cụ cho nhà phát triển sẽ sử dụng các dấu hiệu trực quan 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ủa mình. Các dòng đã xoá được biểu thị bằng đường màu đỏ, các đường đã sửa đổi được đánh dấu 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ẻ Nguồn nhanh cho phép bạn tập trung vào mã nguồn HTML hoặc JavaScript cùng lúc với các quy tắc CSS. Ngoài ra, khi bạn nhấp vào một tài sản CSS trong ngăn Kiểu, thẻ Nguồn nhanh sẽ tự động chuyển đến và đánh dấu định nghĩa trong nguồn.
Bật thử nghiệm điểm khác biệt về nguồn trong Chrome Canary để dùng thử ngay hôm nay.
Chỉnh sửa video Sass trực tiếp
Sau đây là vài thông tin sơ lược về một số điểm cải tiến chính 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 rất sớm. Chúng tôi sẽ liên hệ lại với bạn trong một bài đăng sau khi những tính năng này đã sẵn sàng cho bạn dùng thử.
Về cơ bản, Công cụ cho nhà phát triển sẽ cho phép bạn xem và chỉnh sửa các biến Sass như bạn vẫn mong đợi. Nhấp vào một giá trị được tổng hợp từ biến Sass và thẻ Nguồn nhanh mới sẽ chuyển đến phần định nghĩ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ộ
Nhìn vào danh sách các bài thuyết trình về web và Chrome tại Google I/O 2016, bạn sẽ thấy một chủ đề lớn xuất hiệ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ụ cho nhà phát triển đang nhanh chóng lặp lại để cung cấp các công cụ mà nhà phát triển cần để tạo 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 những yêu cầu riêng, vì vậy Công cụ cho nhà phát triển đã dành riêng toàn bộ 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 Application (Ứ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 giữ nguyên. Chỉ có một vài ngăn mới được thiết kế riêng cho phương pháp Phát triển ứng dụng web tiến bộ:
Ngăn Tệp kê khai cho bạn thấy 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 "Thêm vào màn hình chính" theo cách thủ công.
Ngăn Service Worker (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.
Và ngăn Xóa bộ nhớ cho phép bạn xóa tất cả các loại dữ liệu để bạn có thể xem trang ở chế độ sạch.
JavaScript
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 fullstack. Nếu bạn phát hiện thấy phần phụ trợ của mình đang trả về mã trạng thái 500 trong khi gỡ lỗi ứng dụng web, thì tức là bạn đã đạt đến giới hạn tính hữu ích của Công cụ cho nhà phát triển một cách hiệu quả. Điều này đòi hỏi bạn phải thay đổi ngữ cảnh và kích hoạt môi trường phát triển phụ trợ để gỡ lỗi sự cố.
Tuy nhiên, khi các phần phụ trợ được viết bằng Node.js, ranh giới giữa giao diện người dùng và phần phụ trợ đang bắt đầu mờ đi. Vì Node.js chạy trên công cụ JavaScript V8 (cùng công cụ hỗ trợ Google Chrome) nên chúng tôi muốn có thể gỡ lỗi Node.js từ Công cụ cho nhà phát triển. Nhờ có V8, Công cụ cho nhà phát triển và Google Cloud Platform 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 Công cụ cho nhà phát triển để xem xét nội bộ ứng dụng Node.js. Chức năng này đã được tạo hàng đêm cho Node.js, mặc dù việc tích hợp Công cụ cho nhà phát triển vẫn đang được hoàn thiện trước khi được đưa vào một bản phát hành chính. Việc gỡ lỗi ứng dụng Node.js từ Công cụ cho nhà phát triển vào một ngày nào đó sẽ đơn giản như việc truyền node --inspect app.js và kết nối từ Công cụ cho nhà phát triển trong bất kỳ cửa sổ Chrome nào.
Mặc dù các công cụ hiện có như Trình kiểm tra nút cung cấp trải nghiệm gỡ lỗi dựa trên GUI, nhưng việc tích hợp Công cụ cho nhà phát triển Node.js mới sẽ vẫn được cập nhật với các tính năng gỡ lỗi mới nhất của Công cụ cho nhà phát triển, chẳng hạn như gỡ lỗi ngăn xếp không đồng bộ, hỗ trợ hộp đen và hỗ trợ ES6.