Xin chào, cộng đồng. Tôi biết rằng tất cả các bạn đều biết rằng tất cả các trình duyệt hiện đại đều có cái gọi là công cụ dành cho nhà phát triển [hoặc công cụ dành cho nhà phát triển], cung cấp nhiều chức năng để thiết kế, chỉnh sửa, thử nghiệm, phân tích và sửa chữa các trang web và ứng dụng web. Ngoài các nhà phát triển front-end, các nhà thiết kế màn hình, UX và UI cũng đang ngày càng sử dụng các công cụ dành cho nhà phát triển để kiểm tra các điều chỉnh trực quan hoặc nội dung trực tiếp trên trang web
Trong bài viết này, tôi sẽ tóm tắt các chức năng quan trọng nhất của các công cụ dành cho nhà phát triển Chrome dành cho nhà thiết kế và người mới bắt đầu. Tài liệu chính thức và rất rộng của nó là hoàn hảo cho các nhà phát triển. Và sự chú ý nhiều nhất sẽ được dành cho CSS trong Chrome và cách tắt các thuộc tính CSS trong trình duyệt. Nhưng nếu bạn không chắc chắn về kỹ năng lập trình của mình, tốt hơn hãy thuê một nhà phát triển CSS, người đó sẽ làm mọi thứ theo cách phù hợp với bạn
Làm cách nào để mở công cụ dành cho nhà phát triển Chrome?
Nhấp chuột phải vào bất kỳ trang web nào để mở Công cụ dành cho nhà phát triển Chrome. Trong menu ngữ cảnh có mục “Kiểm tra” hoặc “Kiểm tra”, hiển thị các công cụ
Nếu nhấp chuột phải không hoạt động, bạn có thể điều hướng qua menu Chrome. Bạn có thể tìm thấy điểm trong “Quảng cáo → Nhà phát triển → Công cụ dành cho nhà phát triển”. Các công cụ cũng có thể được mở bằng phím tắt Cmd + Option + I [Mac] hoặc Ctrl + Shift + I [Windows]
Bạn có thể làm gì với sự trợ giúp của Công cụ dành cho nhà phát triển Chrome?
Kiểm tra thiết kế đáp ứng, điện thoại thông minh và máy tính bảng
Các chức năng kiểm tra cho thiết kế đáp ứng là một phần quan trọng của các công cụ dành cho nhà phát triển. Kích thước hiển thị khác nhau, khái niệm vận hành [e. g. touch], độ phân giải màn hình và điểm ngắt có thể được kiểm tra bằng tính năng này
Có thể truy cập Công cụ kiểm tra thiết kế đáp ứng thông qua biểu tượng tương ứng ở trên cùng bên trái trong “Dock” của công cụ dành cho nhà phát triển
Khi mở Công cụ kiểm tra thiết kế đáp ứng, chế độ xem của trang web bị giảm. Một vài tùy chọn cấu hình có sẵn phía trên bản xem trước. Các tùy chọn hiển thị ở đây có thể được bổ sung hoặc giảm bớt bằng cách sử dụng ba dấu chấm nhỏ ở góc bên phải
Các chức năng sau có sẵn cho tất cả các tùy chọn
Kích thước khung nhìn hoặc mô phỏng thiết bị
Nếu chọn “Responsive”, khu vực hiển thị có thể được điều chỉnh linh hoạt bằng tay cầm. Nếu một thiết bị cụ thể đã được chọn để mô phỏng, Chrome sẽ tự động đặt các tùy chọn cần thiết cho thiết bị nàyhệ số thu phóng
Điều này có nghĩa là kích thước màn hình lớn hơn thiết bị được sử dụng cũng có thể được kiểm traTruy vấn phương tiện truyền thông
Các điểm ngắt có thể được xem tại đây. Màu cam là viết tắt của Mobile First, màu xanh lam cho Desktop First, màu xanh lá cây cho dải phương tiệnMô phỏng loại thiết bị
Bạn có thể chọn giữa thiết bị di động và máy tính để bàn, mỗi thiết bị đều có thao tác bằng chuột hoặc cảm ứngMô phỏng tốc độ Internet
Mạng có thể bị chậm lại, chẳng hạn để kiểm tra xem cấu trúc của trang web hoạt động như thế nào khi Internet chậmKiểm tra chất lượng hiển thị
1 DPR là viết tắt của độ phân giải màn hình bình thường, 2 DPR cho màn hình có độ phân giải cao với chất lượng võng mạc, 3 DPR cho màn hình có độ phân giải siêu cao
Thiết kế trong trình duyệt
Các trang web ngày càng được trình bày trực tiếp trong trình duyệt – cũng nhờ vào các khả năng được cung cấp bởi các công cụ dành cho nhà phát triển. Trong các khu vực dành cho mã HTML và CSS, có thể thực hiện các điều chỉnh hiển thị trực tiếp. Quy trình công việc này được gọi là “Thiết kế trong trình duyệt”
Tất cả các thay đổi trong Dev-Tools [thường] chỉ tạm thời hiển thị trong trình duyệt. Sau khi tải lại trang web, các điều chỉnh thường biến mất một lần nữa. Tuy nhiên, công việc của các nhà phát triển và nhà thiết kế front-end cũng như sự hợp tác của họ được đơn giản hóa đáng kể
Chỉnh sửa CSS
Để chỉnh sửa mã CSS hiện tại, tất cả những gì bạn phải làm là nhấp vào bộ chọn, thuộc tính hoặc giá trị. Chrome đề xuất các lệnh có thể có khi bạn nhập
Nếu một thuộc tính mới được thêm vào, hãy nhấp vào bên phải dấu chấm phẩy của lệnh cuối cùng. Sau đó, Chrome sẽ mở một dòng mới và thuộc tính CSS mới có thể được viết. Bạn có thể chuyển đến giá trị bên phải bằng phím tab
Chỉnh sửa màu sắc, bóng đổ và hiệu ứng chuyển tiếp
Nếu bộ chọn CSS chứa thông số màu, thì Chrome sẽ hiển thị màu đó dưới dạng bản xem trước. Nhấp vào màu sẽ mở bộ chọn màu. Một điều chỉnh màu sắc có thể được thực hiện ở đây. Điều chỉnh được xác nhận bằng Enter và mã màu được thông qua. Giờ đây, bạn có thể sao chép mã màu vào mã nguồn của riêng mình hoặc liên lạc với nhà phát triển
Một biểu tượng nhỏ cũng được hiển thị nếu bộ chọn CSS chứa bóng đổ qua bóng hộp hoặc chuyển tiếp qua quá trình chuyển đổi. Bằng cách nhấp vào nó, một bảng điều khiển khác có thể được mở để điều chỉnh
Tìm và sửa lỗi CSS bằng các công cụ dành cho nhà phát triển
Chrome cũng giúp tìm và sửa lỗi. Một dấu chấm than được hiển thị khi một lệnh không chính xác. Khi di chuột qua, bạn cũng có thể tìm hiểu xem thuộc tính hoặc giá trị có sai hay không
Như đã đề cập ở trên, một dòng có một dòng chạy qua và chuyển sang màu xám mà không có dấu chấm than không có nghĩa là lệnh đó sai, mà là Chrome đang bỏ qua lệnh
Cách tắt thuộc tính CSS. một số cách để làm điều đó
Như bạn đã biết, trang mà chúng ta thấy trên một trang web cụ thể bao gồm một số phần tử. Chúng bao gồm đánh dấu html, cho trình duyệt biết trang có gì và ở đâu, và CSS, là một tập hợp các kiểu cho biết các phần tử này sẽ trông như thế nào. Bạn có thể thuê một nhà phát triển CSS và yêu cầu anh ta giải thích phần lý thuyết này cho bạn
Hãy tưởng tượng một tình huống. bạn đã tạo trang web đầu tiên hoặc trang web thứ hai mươi của mình, nó trông rất tuyệt, nhưng vì lý do nào đó, các kiểu CSS của khách truy cập không tải được. Có lẽ anh ta sẽ rời khỏi trang web ngay lập tức, vì mọi thứ đã trở thành một mớ hỗn độn, hoặc có thể anh ta sẽ ở lại để đọc, vì giao diện của trang web vẫn còn bao dung
Để tìm hiểu xem trang web của bạn sẽ trông như thế nào khi không có kiểu css trong Google Chrome, thật tiện lợi khi sử dụng tiện ích mở rộng dành cho Nhà phát triển web
Hướng dẫn
- Mở cửa hàng tiện ích bổ sung của Google chrome. https. //trình duyệt Chrome. Google. com/webstore/category/apps, trong hộp tìm kiếm, sau đó bạn phải nhập Nhà phát triển web
- Mở trang tiện ích mở rộng dành cho Nhà phát triển web và nhấp vào Cài đặt
- Truy cập trang web mà bạn muốn tắt kiểu CSS trong Chrome
- Sau khi cài đặt sẽ xuất hiện biểu tượng bánh răng ở góc trên bên phải, bạn nhấn vào đó
- Trong cửa sổ xuất hiện, nhấp vào tab CSS, rồi nhấp vào “Disable All Styles”
Các cách khác để tắt CSS là gì?
- Trong Chrome, bạn có thể thực hiện việc này trong bảng điều khiển dành cho nhà phát triển.
- Mở bảng điều khiển dành cho nhà phát triển bằng CTRL+SHIFT+J hoặc Trình đơn > Công cụ > Bảng điều khiển dành cho nhà phát triển.
- Trong bảng điều khiển dành cho nhà phát triển, chuyển đến tab Nguồn
- Ở góc trên bên trái của tab này có một biểu tượng có hình tam giác thả xuống. Nhấn vào nó
- Navigate to -> css ->
- Chọn tất cả văn bản và nhấn xóa
- Xả và lặp lại cho từng biểu định kiểu bạn muốn tắt
- Mở bảng điều khiển dành cho nhà phát triển bằng CTRL+SHIFT+J hoặc Trình đơn > Công cụ > Bảng điều khiển dành cho nhà phát triển.
- Đối với các trang dựa vào CSS bên ngoài [hầu hết các trang hiện nay], giải pháp đơn giản và đáng tin cậy là hủy phần tử head
tài liệu. querySelector [“đầu”]. gỡ bỏ [];
Nhấp chuột phải vào trang này, chọn Kiểm tra, dán mã vào bảng điều khiển devtools và nhấn Enter
Phiên bản bookmarklet có cùng mã mà bạn có thể dán làm URL dấu trang
jav. [hàm [] {tài liệu. querySelector [“đầu”]. gỡ bỏ [];}] []
Bây giờ, nhấp vào một dấu trang trong thanh Yêu thích sẽ hiển thị trang mà không có bất kỳ kiểu CSS nào
Loại bỏ phần đầu sẽ không hoạt động đối với các trang sử dụng kiểu nội tuyến
Phần kết luận
Tóm lại, các công cụ dành cho nhà phát triển trong Chrome có nhiều khả năng thú vị dành cho nhà phát triển. Thuê một nhà phát triển CSS hoặc bắt đầu tự học CSS để tạo ra các thiết kế trang web hấp dẫn, phong cách và thẩm mỹ cho các mục đích khác nhau. Tôi hy vọng rằng bài viết này là một hướng dẫn hữu ích cho bạn, giúp bạn tìm ra cách tắt thuộc tính CSS trong công cụ dành cho nhà phát triển Chrome