Làm cách nào để chỉnh sửa css trong trình duyệt của tôi?
|
Đã bao nhiêu lần bạn thấy mình chỉnh sửa và điều chỉnh mã CSS hoặc JavaScript ngay trong trình duyệt, sau đó làm mới trang chỉ để mất tất cả các thay đổi của bạn? Show
Trình duyệt web đóng một vai trò quan trọng trong nhiều quy trình phát triển web; . Nếu trình duyệt chính bạn đang sử dụng là Google Chrome, thì bạn có thể tận dụng “Không gian làm việc”, một tính năng của DevTools của Chrome, để làm cho quy trình phát triển của bạn hiệu quả hơn. Đây là cách Để bật tính năng này trên một trang web, hãy làm theo các bước bên dưới
 Nếu bạn chưa bao giờ xem mã của một trang web vì tò mò, bạn có thể thắc mắc tại sao bạn nên học cách sử dụng Inspect Element
Không bao giờ bỏ lỡ một bài đăng trên blog của Zapier Đặt mua Đối với những trường hợp này và hàng chục trường hợp sử dụng khác, Inspect Element là một công cụ hữu ích để theo dõi. Đó là một phần của Công cụ dành cho nhà phát triển trong trình duyệt của bạn, bao gồm một số tính năng bổ sung. bảng điều khiển để chạy mã, trang Xem nguồn để chỉ xem mã thô phía sau trang web, trang Nguồn có danh sách mọi tệp được tải trong trang web, v.v. Bạn có thể tự mình khám phá tất cả những thứ đó, nhưng bây giờ, hãy xem cách sử dụng tab Thành phần chính để tự chỉnh sửa trang web của chúng tôi Cách bắt đầu với Kiểm tra phần tửCó một số cách để truy cập Google Chrome Inspect Element. Chỉ cần mở một trang web mà bạn muốn thử chỉnh sửa (để làm theo hướng dẫn này, hãy mở Zapier. com), sau đó mở công cụ Kiểm tra phần tử theo một trong ba cách sau
Theo mặc định, Công cụ dành cho nhà phát triển mở trong một ngăn ở cuối trình duyệt của bạn và sẽ hiển thị tab Thành phần—đó là công cụ Kiểm tra thành phần nổi tiếng mà chúng tôi đang tìm kiếm Bạn sẽ không có nhiều không gian để làm việc với Kiểm tra phần tử ở cuối màn hình, vì vậy hãy nhấp vào ba dấu chấm dọc ở phía trên cùng bên phải của ngăn phần tử kiểm tra gần chữ "X" (bạn sẽ nhấp vào biểu tượng này để đóng . Bây giờ, bạn sẽ thấy một tùy chọn để di chuyển ngăn sang bên phải trình duyệt của mình (chế độ xem neo bên phải) hoặc để mở ngăn trong một cửa sổ hoàn toàn riêng biệt (chế độ xem bỏ neo) Đối với hướng dẫn này, hãy gắn ngăn ở bên phải cửa sổ trình duyệt của bạn để có thêm không gian làm việc. Bạn có thể làm cho bảng Công cụ dành cho nhà phát triển rộng hơn hoặc hẹp hơn bằng cách di chuột qua đường viền bên trái. Khi con trỏ Bây giờ chúng ta đang ở phần Kiểm tra phần tử, có một loạt các công cụ hữu ích trong tầm tay mà chúng ta có thể sử dụng để làm cho bất kỳ trang web nào trông chính xác như cách chúng ta muốn. Đối với hướng dẫn này, chúng tôi sẽ tập trung vào các tab Thành phần, Mô phỏng và Tìm kiếm Tìm kiếmTab "" cho phép bạn tìm kiếm một trang web cho nội dung cụ thể hoặc phần tử HTML. Nó hơi ẩn. bạn sẽ cần nhấp vào 3 dấu chấm, sau đó nhấp vào Tìm kiếm tất cả các tệp để khám phá nó. Sau đó, bạn sẽ có thể tìm kiếm mọi tệp trong trang web để tìm bất kỳ thứ gì bạn muốn yếu tố"Kiểm tra phần tử" là công cụ mà chúng ta sẽ khám phá nhiều nhất trong hướng dẫn này và là công cụ mở ra đầu tiên khi bạn khởi chạy Công cụ dành cho nhà phát triển trong hầu hết các trình duyệt. Hoặc, nhấp vào tab "" trong Công cụ dành cho nhà phát triển để quay lại nếu bạn đang khám phá ở nơi khác Trong tab Khám phá, bạn có thể xem tất cả HTML, JavaScript và CSS đã tạo nên một trang web. Nó gần giống như việc chỉ xem nguồn của một trang web, với một điểm khác biệt quan trọng. bạn có thể thay đổi bất kỳ mã nào và xem các thay đổi trong thời gian thực trên trang web bạn đã mở. Bạn có thể thay đổi mọi thứ từ bản sao sang kiểu chữ, sau đó chụp màn hình thiết kế mới hoặc lưu các thay đổi của bạn (chỉ cần đi tới Xem > Nhà phát triển > Xem nguồn và lưu trang dưới dạng tệp HTML hoặc sao chép các thay đổi mã vào trình soạn thảo văn bản của bạn). Tuy nhiên, khi bạn tải lại trang, tất cả các thay đổi của bạn sẽ biến mất vĩnh viễn thi đuaBạn đã bao giờ muốn xem trước một trang web trên điện thoại mà không cần rút điện thoại ra khỏi túi chưa? . Bạn thậm chí có thể đặt tốc độ internet mô phỏng để xem trang web sẽ tải nhanh như thế nào qua quay số Nó cũng có một chút ẩn. bạn sẽ cần mở Inspect Element và nhấp vào nút biểu tượng điện thoại để bắt đầu. Sau đó, bạn sẽ có một công cụ hoàn hảo để hiểu cách người khác trải nghiệm một trang web Đã đến lúc phải đi làm. Trước tiên, chúng tôi sẽ sử dụng Tìm kiếm để tìm mọi thứ trên trang web, sau đó sử dụng Phần tử để chỉnh sửa văn bản và hơn thế nữa trên trang web và cuối cùng sẽ sử dụng Mô phỏng để xem trang web của chúng tôi trông như thế nào trên điện thoại từ một vị trí cụ thể Tìm mọi thứ trên một trang web với Tìm kiếm phần tử kiểm traTự hỏi những gì đi vào các trang web yêu thích của bạn? . Bạn chỉ có thể mở chế độ xem Thành phần mặc định, nhấn Để bắt đầu, hãy mở Zapier. com trong Chrome nếu bạn chưa có, sau đó mở Kiểm tra phần tử, nhấp vào 3 dấu chấm dọc ở góc trên cùng bên phải của ngăn Công cụ dành cho nhà phát triển (gần chữ "X") và chọn "Tìm kiếm tất cả tệp. " Tab Tìm kiếm sẽ xuất hiện ở nửa dưới của ngăn Công cụ dành cho nhà phát triển Nhớ cách mở Inspect Element? Trong trường tìm kiếm, bạn có thể nhập bất kỳ thứ gì—BẤT CỨ ĐIỀU GÌ—mà bạn muốn tìm trên trang web này và nó sẽ xuất hiện trong ngăn này. Hãy xem làm thế nào chúng ta có thể sử dụng này Nhập Hãy thử một truy vấn khác. Xóa Tìm kiếm cũng là một công cụ hiệu quả cho các nhà thiết kế vì bạn cũng có thể tìm kiếm theo màu sắc. Nhập Đây là một cách thuận tiện để các nhà thiết kế đảm bảo rằng một trang web đang tuân theo hướng dẫn về phong cách thương hiệu của họ. Với công cụ "Tìm kiếm", các nhà thiết kế có thể dễ dàng kiểm tra CSS của trang web để xem liệu một màu có được áp dụng cho thành phần sai hay không, nếu một họ phông chữ không chính xác được sử dụng trên trang web hoặc nếu bạn vẫn đang sử dụng Công cụ "Tìm kiếm" cũng là cách hoàn hảo để giao tiếp tốt hơn với các nhà phát triển vì bạn có thể chỉ cho họ chính xác nơi bạn đã tìm thấy lỗi hoặc chính xác những gì cần thay đổi. Chỉ cần cho họ biết số dòng nơi có sự cố và bạn sẽ khắc phục nhanh hơn nhiều Hoặc, bạn có thể tự thay đổi trang web bằng Thành phần, phần cốt lõi của Công cụ dành cho nhà phát triển của Chrome Thay đổi mọi thứ với các yếu tốCác nhà phát triển giao diện người dùng sử dụng công cụ Kiểm tra phần tử hàng ngày để sửa đổi giao diện của trang web và thử nghiệm các ý tưởng mới—và bạn cũng có thể làm như vậy. Inspect Elements cho phép bạn điều chỉnh giao diện và nội dung của trang web bằng cách thêm các chỉnh sửa tạm thời vào các tệp CSS và HTML của trang web Khi bạn đóng hoặc tải lại trang, các thay đổi của bạn sẽ biến mất; . Bằng cách đó, bạn có thể thoải mái thử nghiệm và thay đổi mọi thứ—sau đó sao chép và lưu những thay đổi tốt nhất để sử dụng lại sau này Hãy xem những gì chúng ta có thể làm với nó Nhấp vào tab "Thành phần" trong ngăn Công cụ dành cho nhà phát triển—và nếu bạn muốn có thêm chỗ, hãy nhấn phím "Esc" để đóng hộp tìm kiếm mà bạn đã mở trước đó. Bạn sẽ thấy HTML của trang này—bây giờ bạn đã biết xúc xích được làm như thế nào Ở góc trên cùng bên trái của ngăn nhà phát triển, bạn sẽ thấy biểu tượng con chuột ở phía trên hình vuông. Nhấp vào nó, sau đó bạn có thể chọn bất kỳ yếu tố nào trên trang mà bạn muốn thay đổi. Vì vậy, hãy thay đổi một số điều Thay đổi văn bản trên trang webBạn đã bao giờ muốn thay đổi văn bản trên một trang web—có lẽ để xem dòng giới thiệu mới sẽ trông như thế nào trên trang chủ của bạn hoặc để xóa địa chỉ email của bạn khỏi ảnh chụp màn hình Gmail? Nhấp vào biểu tượng "chuột ở đầu hình vuông", sau đó nhấp vào bất kỳ văn bản nào trên trang—có thể là dòng giới thiệu trên trang chủ Zapier. Trong ngăn Công cụ dành cho nhà phát triển, bạn sẽ thấy một dòng văn bản có phần tô sáng màu xanh giống như thế này Nhấp đúp vào văn bản "Kết nối ứng dụng của bạn" được tô sáng màu xanh lam trong ngăn Công cụ dành cho nhà phát triển và văn bản này sẽ chuyển thành trường văn bản có thể chỉnh sửa Nhập bất cứ thứ gì bạn thích vào trường văn bản này ("Auri là một thiên tài" sẽ hoạt động tốt) và nhấn enter. thì đấy. Bạn vừa thay đổi văn bản trên trang web Làm mới trang và mọi thứ sẽ trở lại bình thường Niềm vui? Ngăn Công cụ dành cho nhà phát triển của bạn tải lại cùng với trang, nhưng hãy đóng nó lại. Nhấn "X" ở góc trên bên phải của trang Mát mẻ. Bây giờ chúng ta sẽ mở nó trở lại—ngay tại văn bản mà chúng ta muốn chỉnh sửa. Tất cả những gì bạn phải làm là nhấp chuột phải vào phần trang bạn muốn thay đổi, sau đó nhấp vào liên kết Kiểm tra hoặc Kiểm tra phần tử xuất hiện ở cuối menu chuột phải Khi ngăn Công cụ dành cho nhà phát triển của bạn mở ra, nó sẽ tự động đánh dấu câu đó. Khá gọn gàng, phải không? Bây giờ chúng tôi đã chọn dòng giới thiệu trên trang web Zapier, hãy thay đổi giao diện của nó Thay đổi màu sắc và phông chữ của các phần tửỞ bên phải của câu này trong ngăn Công cụ dành cho nhà phát triển, bạn sẽ thấy một ngăn phụ có 3 tab bổ sung. Trình xử lý kiểu, tính toán và sự kiện. Mỗi cái cho phép bạn thay đổi giao diện của câu này trên trang. Hãy bắt đầu trên tab "Kiểu" Bạn có thể nhận thấy rằng một số nội dung bị gạch bỏ trong tab "Kiểu". Điều này có nghĩa là các kiểu này không hoạt động đối với phần tử mà chúng tôi đã chọn chúng, vì vậy việc thay đổi các giá trị này sẽ không có hiệu lực. Chúng ta có thể bỏ qua những điều này cho mục đích của chúng tôi Hãy thử thay đổi một cái gì đó. Nhấp lại vào biểu tượng mũi tên ở đầu Kiểm tra phần tử và chọn văn bản ngay bên dưới nút "Đăng ký" trên trang. Tìm "text-align" trong tab "Styles" (bạn có thể phải cuộn một chút để tìm cái này) Ngay bây giờ, nó được đặt thành "trung tâm", nhưng hãy nhấp đúp vào "trung tâm" và nhập Bây giờ hãy thử với màu sắc. Sử dụng biểu tượng chuột trong Kiểm tra phần tử để chọn nút lần này, sau đó trong tab Kiểu tìm dòng này Và nhấp đúp vào "#ff4a00". Nhập Chúng tôi vừa thay đổi màu của nút từ cam sang xanh lam. Bây giờ hãy thử một cái gì đó thực sự mát mẻ Thay đổi trạng thái phần tửBạn muốn xem nút hoặc liên kết sẽ trông như thế nào khi ai đó di chuột qua hoặc nhấp vào nút hoặc liên kết đó? . Bạn có thể thấy phần tử sẽ trông như thế nào sau khi khách truy cập di chuột qua phần tử (trạng thái di chuột), chọn phần tử (trạng thái tiêu điểm) và/hoặc đã nhấp vào liên kết đó (trạng thái đã truy cập) Hãy thử điều này. Đảm bảo bạn đã chọn nút đăng ký trên trang chủ Zapier. Sau đó, nhấp chuột phải vào mã đó trong tab Thành phần và chọn Điều đó sẽ thay đổi nút thành màu xám, trang web của Zapier hiển thị khi bạn nhấp vào nút Bây giờ hãy thay đổi giá trị màu nền thành Hãy thử trải nghiệm—thay đổi màu của Thay đổi hình ảnhBạn cũng có thể dễ dàng thay đổi hình ảnh trên trang web bằng Inspect Element. Hãy hoán đổi hình nền Siêu anh hùng trên trang web Zapier với bức ảnh ấn tượng về ngọn lửa mặt trời từ NASA Đầu tiên, sao chép và dán liên kết này vào hình ảnh
Bây giờ, hãy mở Inspect Element trên nền của trang chủ Zapier và đảm bảo rằng bạn đã chọn dòng Nhấn "enter" và thấy ngay sự khác biệt Ghi chú. Bạn cũng có thể thay đổi ảnh thành GIF hoặc video—tất cả những gì bạn cần là liên kết tới tệp và bạn có thể thêm liên kết đó vào Chỉnh sửa văn bản rất tiện lợi, hoán đổi hình ảnh rất thú vị và việc thay đổi màu sắc cũng như kiểu dáng có thể giúp bạn nhanh chóng mô phỏng những thay đổi bạn muốn thực hiện cho trang web của mình. Nhưng thiết kế nút và khẩu hiệu mới đó sẽ trông như thế nào trên thiết bị di động? Đó là lúc Thi đua xuất hiện—đó là lúc mọi thứ chúng tôi đã xem xét cho đến nay có thể được áp dụng hơn nữa. Hãy xem làm thế nào Kiểm tra trang web trên bất kỳ thiết bị nào có mô phỏngTất cả mọi thứ phải được đáp ứng ngày hôm nay. Các trang web không còn chỉ được xem trên máy tính—chúng có nhiều khả năng được xem trên điện thoại, máy tính bảng, TV hoặc bất kỳ loại màn hình nào khác hơn bao giờ hết. Điều đó phải luôn được ghi nhớ khi tạo nội dung và thiết kế mới Mô phỏng là một công cụ tuyệt vời để ước tính giao diện của các trang web đối với người dùng trên nhiều thiết bị, trình duyệt và thậm chí cả các vị trí. Mặc dù điều này không thay thế việc thử nghiệm thực sự trên nhiều thiết bị và trình duyệt, nhưng đó là một khởi đầu tuyệt vời Trong ngăn Công cụ dành cho nhà phát triển, bạn sẽ thấy một biểu tượng điện thoại nhỏ ở góc trên cùng bên trái. Nhấp vào nó. Điều này sẽ thay đổi trang thành một trang nhỏ, kiểu điện thoại với menu ở trên cùng để thay đổi kích thước Thay đổi kích thước trình duyệt nhỏ để xem mọi thứ trông như thế nào nếu bạn đang duyệt trên máy tính bảng, điện thoại hoặc thậm chí màn hình nhỏ hơn. Hoặc, nhấp vào menu ở trên cùng để chọn kích thước thiết bị mặc định như Màn hình trang web sẽ thu nhỏ lại bằng kích thước của iPhone 8 Plus và bạn có thể phóng to một chút bằng cách nhấp vào biểu tượng + bên cạnh số ở trên cùng bên phải của lưới—đó là giao diện của trang web nếu ai đó phóng to Tiếp tục phóng to chế độ xem bằng cách kéo cạnh phải của mô phỏng trang web sang phải. Xem những gì xảy ra? . Kéo màn hình dọc theo lưới cho phép bạn xem trang web sẽ thay đổi như thế nào khi kích thước màn hình thay đổi, nhưng chế độ xem của bạn sẽ không còn phản ánh kiểu thiết bị mà bạn đã chọn trước đó Hãy quay lại chế độ xem iPhone 8 Plus bằng cách chọn lại chế độ xem này trong danh sách kiểu máy thả xuống. Bên cạnh danh sách thả xuống là từ "Chân dung. " Như bạn có thể đoán, điều này cho phép bạn chuyển đổi giữa chế độ xem ngang và ngang Bây giờ, chúng ta có thể xem bài đăng này sẽ trông như thế nào nếu bạn đang đọc nó trên iPhone 8 Plus. Vui lòng chơi xung quanh với các thiết bị khác để xem trang web này và độ phân giải màn hình thay đổi như thế nào. Tất cả các công cụ dành cho nhà phát triển khác mà chúng tôi đã giới thiệu cho đến nay cũng sẽ phản ứng với chế độ xem thiết bị. Ví dụ: chọn lại văn bản khẩu hiệu của Zapier Ở chế độ xem iPhone 8 Plus, chúng ta có thể thấy dòng chữ này là 2em, trong khi ở chế độ xem mặc định trên máy tính là 3em "Em" là đơn vị cỡ chữ cho phép bạn tự động thay đổi kích thước của văn bản so với văn bản xung quanh. Ví dụ: giả sử chúng tôi có một người dùng có cài đặt phông chữ tùy chỉnh lớn trên trình duyệt của họ. Nếu bạn đặt kích thước phông chữ đoạn văn của mình thành 14px, thì phông chữ của bạn sẽ luôn là 14px cho người dùng đó bất kể điều gì. Tuy nhiên, nếu bạn đặt kích thước phông chữ của đoạn văn thành 1em, trình duyệt của người dùng sẽ sử dụng đơn vị này để chia tỷ lệ văn bản của bạn theo cài đặt lớn của người dùng. Điện thoại và máy tính bảng làm điều này để thu phóng văn bản độc đáo Bây giờ, hãy chuyển sang chế độ xem Apple iPad và chọn tiêu đề "thử nghiệm trên các thiết bị" ở trên. Lần này, cỡ chữ là 3em. Kích thước phông chữ đã thay đổi dựa trên chế độ xem thiết bị, trở lại kích thước mặc định mà phông chữ sẽ sử dụng trên máy tính nhờ màn hình lớn hơn của máy tính bảng Giả lập cảm biến thiết bị di độngBạn có thể nhận thấy rằng con chuột của bạn bây giờ xuất hiện dưới dạng một vòng tròn nhỏ trên trang web. Điều này cho phép bạn tương tác với trang như thể bạn đang ở trên thiết bị di động của mình. Nếu bạn nhấp trong khi kéo trang xuống, thao tác này sẽ không đánh dấu văn bản như bình thường trong trình duyệt của bạn—nó sẽ kéo màn hình xuống giống như bạn đang sử dụng thiết bị màn hình cảm ứng. Sử dụng chế độ xem này, bạn có thể thấy các vùng cảm ứng lớn như thế nào trên một trang web. Điều này có nghĩa là bạn có thể xem các nút, biểu tượng, liên kết hoặc các yếu tố khác có thể dễ dàng chạm bằng ngón tay Bạn thậm chí có thể làm cho trình duyệt của mình hoạt động như một chiếc điện thoại. Nhấn phím "Esc" để mở lại ngăn tìm kiếm trong Kiểm tra phần tử và lần này nhấp vào menu 3 chấm ở bên trái để có menu tùy chọn. Chọn Cảm biến để nhận ba công cụ mới. Định vị địa lý, Định hướng và Cảm ứng Cảm ứng cho phép bạn bật hoặc tắt bộ chọn vòng tròn mặc định hoạt động giống ngón tay hơn là con trỏ chuột thông thường. Định hướng cho phép bạn tương tác với các trang web nhạy cảm với chuyển động, chẳng hạn như trò chơi trực tuyến cho phép bạn di chuyển mọi thứ bằng cách di chuyển điện thoại của mình. Và Định vị địa lý cho phép bạn giả vờ như mình đang ở một địa điểm khác Hãy thử xem trang web này từ Trụ sở chính của Google ở Mountain View, CA Chọn hộp bên cạnh "Mô phỏng tọa độ định vị địa lý" và nhập giá trị Không có gì thay đổi, phải không? Điều này là do không có nội dung nào trên trang này thay đổi dựa trên vị trí của bạn. Tuy nhiên, nếu bạn thay đổi tọa độ trên một trang web như Mô phỏng là một cách tuyệt vời để đặt bạn vào vị trí của người dùng và xem xét những gì người dùng có thể thấy trên trang web của bạn—và đó là một cách thú vị để khám phá web quốc tế Mô phỏng mạng di độngBạn cũng có thể xem nó như thế nào khi duyệt một trang web trên các mạng khác nhau, có lẽ để xem liệu trang web của bạn có tải ngay cả khi người dùng của bạn sử dụng mạng 3G chậm hơn không Để dùng thử, hãy nhấp lại vào nút ba vòng tròn ở bên trái tab tìm kiếm của Kiểm tra phần tử và chọn "Điều kiện mạng". Ở đó, bạn có thể chọn 3G nhanh hay chậm, hoặc ngoại tuyến để xem trang hoạt động như thế nào khi không có internet. Hoặc, nhấp vào Thêm. để bao gồm thử nghiệm của riêng bạn (có thể thêm 56 Kbps để kiểm tra internet quay số). Bây giờ, hãy tải lại trang và bạn sẽ thấy trang web mất bao lâu để tải khi kết nối chậm—và trang web trông như thế nào khi đang tải. Điều đó sẽ cho thấy lý do tại sao bạn nên cải thiện trang web của mình để tải nhanh hơn trên các kết nối chậm Bạn cũng có thể thay đổi tác nhân người dùng của mình—bỏ chọn "Chọn tự động" bên cạnh "Tác nhân người dùng" và chọn "Internet Explorer 7" để xem liệu trang web có thay đổi kết xuất của nó đối với các trình duyệt cũ hơn không. Đó cũng là một thủ thuật hữu ích để làm cho các trang web tải ngay cả khi chúng tuyên bố rằng chúng chỉ hoạt động trong một trình duyệt khác như Internet Explorer thử tháchHãy kết thúc với một vài thử thách. Hãy cho chúng tôi thấy những gì bạn đã học được
Nhóm Tiếp thị tại nhóm Zapier dựa vào Kiểm tra phần tử để chỉnh sửa thông tin cá nhân từ ảnh chụp màn hình trong các bài đánh giá ứng dụng của chúng tôi, trong khi nhóm thiết kế của chúng tôi sử dụng nó để mô phỏng các thay đổi và xem mọi thứ sẽ trông như thế nào trên các màn hình khác nhau Làm thế nào để bạn sử dụng Inspect Element? Thưởng thức các kỹ năng hack mới của bạn? Hướng dẫn này ban đầu được xuất bản vào ngày 5 tháng 1 năm 2015, sau đó được cập nhật và xuất bản lại vào ngày 6 tháng 6 năm 2017 và ngày 25 tháng 1 năm 2018 với ảnh chụp màn hình và các bước từ phiên bản Google Chrome mới nhất |
