Làm thế nào để thay thế Javascript của trang web sản xuất với Javascript địa phương?

Trên trang web sản xuất của tôi, tôi đã biên dịch Javascript.Làm thế nào để thay thế Javascript của trang web sản xuất với Javascript địa phương?

<script src="/js/mycode.min.js"></script>

Nó sẽ rất tiện lợi cho việc gỡ lỗi nếu tôi có thể làm cho trình duyệt của tôi thay thế mà với

<script src="http://localhost/js/mycode1.js"></script> 
<script src="http://localhost/js/mycode2.js"></script> 
...

Tôi biết tôi có thể thao tác DOM sử dụng một cái gì đó giống như userscripts Greasemonkey, nhưng tôi không thể đưa ra với một giải pháp ngăn chặn việc thực hiện "mycode.min.js".

Bất kỳ ý tưởng nào?

Nguồn

2010-10-14 Julius Eckert

Cách tôi làm điều đó:

Tải về và cài đặt Fiddler nếu bạn đang ở trên cửa sổ.
Bật tính năng này để thu được lưu lượng truy cập http [IE/Chrome thực hiện theo mặc định, Firefox - bật nó qua cài đặt bổ sung]
Tải lên trang được đề cập.
Tìm tệp bạn muốn thay thế trong danh sách lưu lượng truy cập http ở bên trái và nhấp vào tệp đó.
Ở bên phải có tab Tự động trả lời. nhấn vào nó.
Bấm vào hộp kiểm để "kích hoạt phản ứng tự động"
Nhấn Add .. nút
Các thả xuống 2 bên phải, chọn tùy chọn mà nói "tìm thấy một tập tin"
Xác định vị trí các tập tin trong hộp thoại và bấm lưu
Lặp lại các bước 4-9 cho đến khi bạn thay thế tất cả các tập tin bạn muốn thay thế
Làm mới cửa sổ trình duyệt và các file js mới của bạn đang chạy

Inst Thay thế tệp js, bạn có thể thay thế tệp html và thay đổi liên kết js trên trang.

Bạn có thể cài đặt Charles nếu bạn sử dụng mac/linux. (không miễn phí, đã dùng thử) Các bước tương tự, nhưng không giống nhau.

Nếu bạn đang sử dụng Google Closure để nén tệp, bạn có thể cài đặt trình cắm của mình để thực hiện source mapping.

Nguồn

2010-10-14 19:04:05 epascarello

Nên hoạt động. Nhưng tôi sẽ tìm ra các giải pháp proxy khác dễ dàng hơn và dễ đọc hơn. Bất cứ ai có thể giới thiệu một tốt cho linux/osx? –

CẬP NHẬT: Tôi viết cho mình một proxy nhỏ mà chuyển tiếp mọi thứ từ máy chủ sản xuất và chuỗi của tôi thay thế thông tin cụ thể

Điều gì về việc sử dụng tên miền phụ như http://static.example.com cho tệp tĩnh (ví dụ: tệp .js) và thay đổi tệp máy chủ lưu trữ?

<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script>

Thêm dòng sau vào hostfile (/etc/hosts cho Linux, C:\WINDOWS\System32\drivers\etc\host):

static.example.com 127.0.0.1

Tất nhiên bạn đã chạy một máy chủ với các tập tin từ http://static.example.com/ trên 127.0.0.1.

Một giải pháp khác là sử dụng máy chủ proxy (cục bộ) như Privoxy để chuyển hướng http://example.com/js/ đến http://localhost/js/.

Nguồn

2010-10-14 18:56:45 Lekensteyn

Nếu chỉ bộ phận IT không khóa truy cập chỉnh sửa để lần thứ là tệp trong nơi làm việc từ địa ngục vì lý do 'bảo mật'. > :) – epascarello

Ý tưởng hay. Tôi sẽ làm điều đó. Nhưng giải pháp này vẫn liên quan đến việc có tất cả mã JS trong một tệp. Sẽ là hoàn hảo để có tất cả chúng tách ra. –

Giả sử kịch bản của bạn chỉ đơn giản là phiên bản thô của tập tin sản xuất, bạn chỉ có thể crack mở debugger yêu thích của bạn hoặc JS console và nhập khẩu các kịch bản của bạn:

document.body.appendChild(document.createElement("script")).src = 
    "http://localhost/js/mycode1.js";

Làm như vậy sẽ ghi đè lên các chức năng và các biến ban đầu được xác định . Bạn sẽ phải chạy lại theo cách thủ công window.onload. Nếu bạn có tập lệnh chạy ngay lập tức hoặc khi tải thay đổi nhiều trên trang, bạn có thể có một số việc phải làm để đưa nó trở lại trạng thái ban đầu.

Chúc may mắn!

Nguồn

2010-10-14 19:47:56 gilly3

Đây không phải là giải pháp tuyệt vời nếu mã gốc điều khiển trang hoặc thêm trình xử lý sự kiện. Bạn sẽ kết thúc gây ra nhiều vấn đề hơn. – epascarello

Chắc chắn ... Tôi đã nói rất nhiều trong câu trả lời của tôi. Nhưng nếu tất cả những gì bạn cần làm là gỡ lỗi mã của bạn, chỉ cần thay thế các hàm bằng kỹ thuật này là đủ để có thể thiết lập các điểm ngắt trong mã của bạn và gỡ lỗi nó. – gilly3

Mặc dù giải pháp của epascarello hoạt động, có một giải pháp nhanh hơn để gỡ lỗi các tệp được rút gọn. Cân nhắc sử dụng JavaScript source maps. Firefox và Chrome hiện đại hỗ trợ chúng.

Ý tưởng về bản đồ nguồn là nói trình duyệt để tìm phiên bản chưa được sửa đổi. Khi bạn bắt đầu gỡ lỗi trong các công cụ phát triển trình duyệt của mình - trình duyệt tải phiên bản chưa được sửa đổi của tập lệnh và hiển thị cho bạn mã JavaScript dễ đọc (hoặc mã bất kỳ bạn đã biên dịch mã JavaScript) trong trình gỡ rối.

Nguồn

2013-09-27 07:09:19

Chỉ là một nhận xét nhanh vì nó không rõ ràng với tôi: phiên bản được rút gọn là những gì được phân tích cú pháp và thực hiện không phải là phiên bản chưa được sửa đổi. –

@DanielSokolowski vâng, bạn nói đúng.Trình duyệt thực hiện phiên bản được rút gọn, nhưng hiển thị cho bạn phiên bản gốc (không được rút gọn) trong các công cụ của DEV, vì vậy bạn có thể thực hiện từng bước thực thi và xem các biến. –

Để thêm một MỚI tập tin mà bạn có thể sử dụng một cái gì đó như một trong những bài khác:

document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js");

kịch bản tampermonkey này có thể thay bất kỳ tập tin JS trên trang web bằng tùy chỉnh của bạn một từ một miền:

// ==UserScript== 
// @name   ReplaceJS 
// @namespace http://example.com/ 
// @version  1.0.0 
// @description Replace javascript files on any webpage! 
// @author  Mr.Sonic Master 
// @match  * 
// @run-at  document-start 
// ==/UserScript== 

var newJSFile = "http://example.com/newJSFile.js"; //The JS file to load in replacment od old JS file 

var oldJSFile = "oldJSFile.replaceThis.js"; //The old JS file as it is named in inspect element (make sure its spelled EXACTLY the same) 

var pattern = new RegExp(oldJSFile, "i"); //Create the RegExp pattern with the /i switch to make it case-insensitive 

function injectScript(originalPage) { //Function injectScript replaces the file 
    console.log('Replace stage 2: Replace text matching', oldJSFile, 'with', newJSFile); 
    var moddedPage = originalPage.replace(pattern, newJSFile); //Modify the HTML code that we got, replacing the old JS file with the new one 
    document.open(); 
    console.log('Replace stage 3: Write new HTML to page...'); 
    document.write(moddedPage); //Write to the page the new HTML code 
    document.close(); 
} 

setTimeout(function() { //Wait a bit for the page's HTML to load... 
    console.log('Replace stage 1: target HTML'); 
    injectScript(document.documentElement.outerHTML); //Run function injectScript with the page's HTML as oldPage in the function 
}, 1111);

Nguồn

2016-05-10 21:11:31

Nỗ lực thú vị. Khi tôi chạy mã này nó không đạt đến giai đoạn 3. Bất kỳ ý tưởng về lý do tại sao? – Clone

Liệu nó có đạt đến giai đoạn 2 không? –

Cảm ơn bạn đã trả lời! Vâng, nó thực sự. Tôi đã thực sự tạo một chủ đề về vấn đề này http://stackoverflow.com/q/43444796/6130540. – Clone

-3

Thêm thứ gì đó vào URL của bạn để phân biệt giữa y của chúng tôi dev và prod bối cảnh; dụ: http://url_of_prod.com

http://url_of_dev.com?debug=true

và sau đó, sử dụng một số javascript để kiểm tra xem GET biến debug là ON hoặc KHÔNG hoặc kiểm tra URL với
if (window.location.host.indexOf ('url_of_dev ')> -1) ...

sau đó sử dụng một chức năng tải để tải hoặc không tập tin của bạn, như trong ví dụ này: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

Nguồn

2016-11-22 15:19:31 Ademus

Các vấn đề liên quan

Làm thế nào để thay thế Javascript của trang web sản xuất với Javascript địa phương?

Trả lời

Các vấn đề liên quan