Thông thường khi chỉnh sửa một trang web, chúng tôi sử dụng một công cụ chỉnh sửa cụ thể như Adobe Dreamweaver, CoffeeCup, Bluefish hoặc một trong những công cụ phát triển khác. Nhưng những gì về nếu chúng ta chỉ đang động não hoặc muốn thử một cái gì đó trên một trang trực tiếp? Chúng tôi có thể tạo một bản sao của trang trong công cụ lựa chọn của chúng tôi và chơi xung quanh đó. Hoặc chúng tôi có thể làm điều đó trong trình duyệt web của chúng tôi. Hướng dẫn này sẽ chỉ cho bạn cách chỉnh sửa một trang web trong trình duyệt của bạn.
Được gọi là Công cụ dành cho nhà phát triển, Firefox gọi tính năng Inspect Element trong khi Chrome gọi nó là Inspect. Dù bằng cách nào, đó là cách để trình duyệt nhìn trộm phía sau thiết kế của bạn và xem mã điều khiển nó. Tính năng này khá nổi tiếng và được sử dụng rất nhiều. Điều không được biết đến nhiều là khả năng thực hiện thay đổi mã đó một cách nhanh chóng.
Mọi thay đổi bạn thực hiện sẽ không được lưu và nó sẽ không ảnh hưởng trực tiếp. Nếu bạn không muốn tải trang trong công cụ dành cho nhà phát triển của mình, đây là một cách gọn gàng để thử nghiệm.
Chỉnh sửa bất kỳ trang web nào trong trình duyệt của bạn
Dreamweaver và các công cụ như nó có trình giả lập trình duyệt tích hợp mô phỏng thiết kế sẽ trông như thế nào trong các trình duyệt khác nhau. Giống như chúng, chúng không phải lúc nào cũng chính xác và bạn thường thấy khi khởi chạy một trang web trông tuyệt vời trong công cụ nhà phát triển của bạn trông hơi khác trong một trình duyệt độc lập.
Thông thường, bạn sẽ khởi chạy trang web trên một máy chủ web nội bộ và kiểm tra trên trình duyệt trước khi khởi chạy trực tiếp chỉ vì lý do này. Nếu một trang đã tồn tại hoặc bạn chỉ muốn thử một cái gì đó, không cần phải sao chép và tải nó vào công cụ phát triển của bạn, bạn chỉ cần sử dụng Công cụ dành cho nhà phát triển của trình duyệt.
Tôi sử dụng Firefox vì vậy tôi sẽ chỉ cho bạn cách sử dụng nó. Chrome rất giống nhau mặc dù.
- Mở một trang web bạn muốn thử nghiệm trong trình duyệt của bạn.
- Nhấp chuột phải vào bất cứ nơi nào trên trang và chọn Kiểm tra.
Bạn sẽ thấy trang của mình chia thành hai với một khung mới xuất hiện ở dưới cùng với một số mã trong đó. Mã này là động lực của trang bạn đã chọn. Các yếu tố trang khác nhau có thể truy cập từ các tab ở đầu tab dưới. Ví dụ: chúng tôi thấy Inspector, Console, Debugger, Style Editor, v.v. trong Firefox.
Nếu bạn chạy con trỏ qua các dòng trong khung bên dưới, bạn sẽ thấy các phần khác nhau của trang web nổi bật. Dòng mã bạn đang bật trong phần tô sáng là mã ảnh hưởng đến phần đó của trang.
- Nếu bạn muốn chơi xung quanh với giao diện của trang, hãy thử Style Editor.
- Nếu bạn muốn chơi xung quanh cách trang hoạt động, hãy thử Bảng điều khiển hoặc Trợ năng.
- Nếu bạn muốn khắc phục lỗi hoặc giải quyết vấn đề, hãy sử dụng Bảng điều khiển hoặc Trình gỡ lỗi
Hiệu suất rất hữu ích cho SEO tại chỗ nhưng Bộ nhớ, Mạng và Lưu trữ không được sử dụng nhiều.
Hãy nhớ rằng, bạn có thể loay hoay trong Công cụ dành cho nhà phát triển bao nhiêu tùy thích và nó sẽ không ảnh hưởng đến trang web. Mọi thay đổi chỉ được thực hiện đối với cách trang được hiển thị trong trình duyệt cá nhân của bạn, bạn không ảnh hưởng đến chính trang web. Khi bạn đóng công cụ, tất cả các thay đổi sẽ bị mất.
Thay đổi trang
Bây giờ bạn biết bạn có thể thay đổi bất cứ điều gì bạn thích mà không ảnh hưởng đến trang web thực tế, hãy vui vẻ một chút. Tìm một yếu tố trên trang mà bạn muốn chỉnh sửa. Bạn có thể thay đổi phông chữ, màu phông chữ, hình nền hoặc bất cứ thứ gì bạn thích. Trong ví dụ này, tôi sẽ thay đổi màu phông chữ của tiêu đề biểu ngữ.
- Nhấp chuột phải vào yếu tố chính xác mà bạn muốn thay đổi và chọn Kiểm tra.
- Đánh dấu dòng bằng 'title' hoặc 'H1' để văn bản được tô sáng ở khung trên cùng.
- Điều hướng sang hai bảng bên trái và tìm màu phông chữ.
- Thay đổi giá trị thành một cái gì đó khác nhau hoặc chọn chấm màu để sử dụng bộ chọn.
Thay đổi của bạn sẽ xuất hiện linh hoạt khi bạn hoàn thành thay đổi. Bạn có thể thay đổi màu sắc, kích thước, phông chữ, nền và mọi thứ về phông chữ. Bạn không thể lưu công việc nhưng những thay đổi của bạn sẽ vẫn còn cho phiên đó.
Bạn có thể thay đổi mọi thứ về trang lý tưởng nếu bạn có ý tưởng và muốn nhanh chóng kiểm tra nó trước khi kích hoạt tất cả các ứng dụng phát triển của mình. Tất cả bạn phải làm là nhớ những thay đổi bạn đã thực hiện và nơi bạn không thể lưu chúng ở đây. Bạn sẽ cần chụp ảnh màn hình hoặc ghi lại các thay đổi và sao chép chúng trong các công cụ dành cho nhà phát triển của bạn để làm cho nó gắn bó.
Chỉnh sửa một trang web trong trình duyệt của bạn là một cách gọn gàng để thử nghiệm hoặc chơi xung quanh với các trang. Đó cũng là một cách tốt để tìm hiểu một chút về phát triển web mà không phải mua các công cụ phát triển đắt tiền. Bây giờ bạn biết làm thế nào, đi và có một vở kịch!
