2009-12-19 16 views
23

Tôi đã nghĩ đến việc sử dụng Fiddler cho mục đích sau ...Tiêm JavaScript vào phần tử đầu của trang web bằng Fiddler

Tôi có dịch vụ dựa trên JavaScript Tôi muốn chứng minh cho khách hàng tiềm năng. Để cho họ thấy những gì trang web của họ có thể trông giống như nếu họ cài đặt (ví dụ bao gồm) kịch bản của tôi, tôi muốn thiết lập Fiddler trên máy tính của tôi, để khi lấy trang web của khách hàng, dòng

<script type="text/JavaScript" src="myscript.js"></script> 

sẽ được bao gồm trong phần HTML <head>.

Điều này có thể dễ dàng thực hiện với Fiddler không? Ai đó có thể chỉ cho tôi nơi tôi có thể tìm thấy tài liệu bao gồm điều đó, nếu nó là?

Cảm ơn!

---- Cập nhật ----

Hiện tại tôi đã sử dụng BHO để thêm tập lệnh của tôi vào trang. Tôi sử dụng execScript(), khi onDocumentComplete, để chạy một đoạn mã JavaScript đơn giản gắn thêm tệp .js mà tôi cần vào trang. Nhưng con trỏ của EricLaw và câu trả lời của jitter dường như là cách để đi cho một cách hoàn chỉnh hơn (và thanh lịch) để làm những gì tôi cần.

Nếu ai đó quan tâm tôi có thể tải lên mã BHO tại đây. -Cảm ơn!

+1

Ví dụ để làm điều này là trong nhóm thảo luận Fiddler ở đây: http://groups.google.com/group/httpfiddler/browse_thread/thread/b3d45f1daaac57b1/7725fcbf80d2ff7e?lnk=gst hoặc wiki ở đây: http://fiddler.wikidot.com/misc-information-page#toc13 – EricLaw

+0

Cảm ơn, những điều này dường như là những gì tôi cần! (Tôi không biết cách đánh dấu nhận xét là câu trả lời ...) – odedbd

Trả lời

0

nếu bạn sử dụng jQuery, bạn có thể thêm js khi đang di chuyển. Tôi có thể nghĩ rằng bạn có thể có một phương pháp mà sẽ bao gồm/loại trừ kịch bản của bạn dựa trên một số param truy vấn. Đây là cách bạn sẽ bao gồm JS với jQuery

$.getScript('someScript.js',function(){ 
//Do something here after your script loads 
}); 
26

mở cáy -> Menu Quy tắc -> Customize Rules (hoặc nhấn tổ hợp phím Ctrl + R)

Các CustomRule.js tập tin sẽ mở ra. Cuộn xuống cho đến khi bạn tìm thấy dòng

static function OnBeforeResponse(oSession: Session) 

Đây là mã của bạn. Tại đây bạn có thể thay đổi phản hồi của máy chủ trước khi trình duyệt nhìn thấy nó.

Các mẫu mã sau đây cho thấy làm thế nào để bao gồm một phần tùy chỉnh mã jQuery mà thay thế vào liên kết Unanswered trong menu ngang với một liên kết phục vụ cắt càng ngắn để Unanswered jQuery Questions

đầu tiên tôi chỉ cho bạn mã jQuery Tôi muốn bao gồm

<script type='text/javascript'> 
    $(function() { 
     var newLink = '<a href="/unanswered/tagged/jquery">Unanswered jQuery</a>'; 
     $('div#hmenus div.nav:first ul li:last a').replaceWith(newLink); 
    }); 
</script> 

Bây giờ mã cáy (dựa trên mã được tìm thấy trong CustomRules.js và mẫu mã từ FiddlerScript CookBook)

//is it a html-response and is it from stackoverflow.com 
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") && 
    oSession.HostnameIs("stackoverflow.com")) { 

    // Remove any compression or chunking 
    oSession.utilDecodeResponse(); 

    var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes); 

    // Match the jQuery script tag 
    var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi; 
    // replace the script tag withitself (no change) + append custom script tag 
    oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('<a href=\"/unanswered/tagged/jquery\">Unanswered jQuery</a>');})</script>"); 

    // Set the response body to the changed body string 
    oSession.utilSetResponseBody(oBody); 
} 

quả trông như thế này

Modified stackoverflow.com http://img269.imageshack.us/img269/570/clipboard01ym.jpg

Tôi nghĩ rằng bây giờ bạn nên có thể hackyourself cùng một đoạn mã mà phù hợp với vấn đề của bạn.

Ví dụ

// Match the head end 
var oRegEx = /(<\/head>)/gi; 
// replace with new script 
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1"); 
+0

+1 BTW khi không yêu cầu regex, bạn có thể sử dụng 'oSession.utilReplaceInResponse' đơn giản hơn, xem http://docs.telerik.com/fiddler/knowledgebase/fiddlerscript/modifyrequestorresponse –

+0

Ngoài ra, bạn nên cài đặt * Add-Ons Syntax-Highlighting * từ http://www.telerik.com/fiddler/add-ons –

+1

Và một điều cuối cùng, tham khảo JScript RegEx có thể được tìm thấy ở đây: http://msdn.microsoft.com/en-us/library/28hw3sce(v=vs.100).aspx –

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