瀏覽器除錯動態js指令碼的方法

阿新 • • 發佈：2019-01-09

前兩天拉取公司前端程式碼修改，發現在開發者工具的sources選項裡邊，居然沒有列出來我要除錯的js指令碼，後來觀察了一下，指令碼是動態在頁面裡引入的，可能是因為這樣所以不顯示出來，但是如果不能斷點除錯，只靠列印日誌真要把人累死了，效率太低，其實有兩種方法可以解決。

1、在腳本里邊增加//# sourceURL=xxxxxxxxx.js，名稱自己命名，可以直接使用檔名，如下圖：
other.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 
動畫</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="external nofollow" />
<script src="./demo1.js"></script>
<script src="./demo2.js"></script 
>
</head>

<body>
    <div id="box">
        <!-- 控制資料的值切換顯示隱藏 -->
        <button @click="show=!show">transition</button>
        <transition name="" mode="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" 
 class="animated">第一種方法</p>
        </transition>
        <transition name="" mode="" enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            <p v-show="show">第二種方法</p>
        </transition>
        <!-- 多元素運動 -->
        <transition-group tag="" name="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated" :key="1">第一個元素</p>
            <p v-show="show" class="animated" :key="2">第二個元素</p>
        </transition-group>
    </div>

    <script>
        window.onload = function(){
            var app = new Vue({
                el:'#box',
                data:{
                    show:false
                }
            })
        }
    </script>
</body>
</html>

demo1.js

// 加上下邊這句話，就可以讓在開發者工具裡顯示不出來的靜態載入程式碼顯示出來，並且可以斷點除錯。
//# sourceURL=demo1.js
document.writeln('demo1.js')

demo2.js

//# sourceURL=demo2.js
document.writeln('demo2.js')

這裡寫圖片描述

然後在網頁裡開啟包含這個js的頁面，這樣就在開發者工具裡能夠看到了，可以像普通js一樣正常打斷點並進行除錯。

2、第二種方法是利用console.log(“讓我除錯吧！”)列印日誌，在瀏覽器console裡看到輸出資訊後，
這裡寫圖片描述

點選後面的連結，即跳入動態指令碼。
這裡寫圖片描述

瀏覽器除錯動態js指令碼的方法

前兩天拉取公司前端程式碼修改，發現在開發者工具的sources選項裡邊，居然沒有列出來我要除錯的js指令碼，後來觀察了一下，指令碼是動態在頁面裡引入的，可能是因為這樣所以不顯示出來，但是如果不能斷點除錯，只靠列印日誌真要把人累死了，效率太低，其實有兩種方法可以解決。 1、在腳本里邊增加/

C#使用技巧之呼叫JS指令碼方法一

原文地址：http://www.cnblogs.com/xdpxyxy/archive/2013/06/11/3132097.html 有時候我們需要在C#中直接呼叫js方法，這是完全沒問題的。當然，我們也可以把js程式碼轉化為C#，然後在C#中執行，但是這個就得花時間了~

瀏覽器除錯之js除錯

現在的瀏覽器一般都給了我們除錯js的功能，個人比較推薦使用google瀏覽器，他的除錯結構清晰且強大，下面就來介紹一下google瀏覽器的除錯功能偵錯程式介面按下F12，你會發現彈出來一個視窗，並附著在當前頁面，這就是google瀏覽器

瀏覽器除錯動態樣式

有的樣式是動態載入上去的，比如滑鼠經過，還有超時消失等。如果在開發者工具獲取這些樣式呢？其實就跟我們截圖一樣，像滑動驗證碼這種，滑鼠經過就出現，那截圖的時候將書房放在驗證碼出現的區域，按下截圖快捷鍵即可。獲取這種樣式也是一樣的在滑鼠經過時

C#使用技巧之呼叫JS指令碼方法二

在上篇 C#使用技巧之呼叫JS指令碼方法一中向大家介紹了C#呼叫js檔案中的js方法，今天給大家介紹另一種呼叫方法: 1、建立WinForm專案。 2、在From1上增加一個文字框一個按鈕。 3、進入Form1.cs編碼後臺程式碼。 Form1.cs程式碼如下: 1 private void b

js Date()日期函數瀏覽器兼容問題解決方法

nbsp 日期版本 asc 問題題解 java js date color 一般直接new Date() 是不會出現兼容性問題的，而 new Date(datetimeformatstring) 常常會出現瀏覽器兼容性問題，為什麽，datetimeformatstri

ajax 動態載入html後不能執行其中的js解決方法

cti 寫入 match IT 通過如果 frame tro 其他事件背景有一個公用頁面需要在多個頁面調用，其中涉及到部分js已經寫在了公用頁面中，通過ajax加載該頁面後無法執行其中的js。解決思路 1. 采用附加一個iframe的方法去執行js，為我等代碼潔癖者

瀏覽器除錯方法

如下所有操作均以谷歌瀏覽器為準:例如:當開啟首頁時:http://localhost:8080/index.html如果該頁面包含了框架(iframe)1.開啟瀏覽器,按F12(部分電腦需要一起按下Fn)2.如果修改了js程式碼,並且需要除錯的js所在頁面在框架內部,則按下滑鼠右鍵: 選擇重新載入框架即可讓瀏

在AxWebBrowser控制元件注入JS指令碼的方法

通過new建立 AxWebBrowser AxSHDocVw.AxWebBrowser webBrowser = new AxSHDocVw.AxWebBrowser(); 2 新增載後的完成事件DocumentComplete webBrows

Chrome - JavaScript除錯技巧總結（瀏覽器除錯JS）

Chrome 是 Google 出品的一款非常優秀的瀏覽器，其內建了開發者工具（ Windows 系統中按下 F12 即可開啟），可以讓我們方便地對 JavaScript 程式碼進行除錯。為方便大家學習和使用，本文我對 Chrome 的除錯技巧做個系統的

html轉譯及防止js指令碼注入攻擊的方法

js指令碼攻擊有的時候頁面中會有一個輸入框，使用者輸入內容後會顯示在頁面中，類似於網頁聊天應用，留言板等。如果使用者輸入了一段js指令碼，比例：，頁面會彈出一個對話方塊，或者輸入的指令碼中有改變頁面js變數的程式碼則會時程式異常或者達到跳過某種驗證的目的。那如何防止這種惡意的js指令碼

火狐瀏覽器js指令碼通過url下載檔案

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ debugger var iframe = document.createElement("iframe") iframe

vs2017 瀏覽器關閉、js 程式碼導致自動退出除錯狀態

在 vs2017 的工具->選項 web專案項取消勾選瀏覽器視窗關閉時停止偵錯程式而我在使用 wangEditor 富文字編輯器時，使用自定義上傳圖片的方法，由於勾選瀏覽器視窗關閉時停止偵錯程式這個選項，導致請求上傳圖片的 Control

網站動態載入JS指令碼

Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for (var i = 0, len = ss.length; i &

用console.table方法除錯列印JS物件的內部結構

1、有時我們需要看清JS物件的內部結構，以便弄清楚其內部引用到底引向何處 2、瀏覽器提供了除錯JS的方法，通過F12可調出其除錯介面，除錯資訊在console頁面，請點選Console頁籤 3、在JS裡，寫上console.table(物件引用)，執行後，console頁面

Js--如何使用瀏覽器除錯js程式碼

前言大家用vs或者其他程式設計程式程式設計的時候，經常會遇到這樣或者那樣的問題，這個時候就需要除錯，看看錯誤是出現在哪個位置，但是在JavaScript中，如果一直都是這樣的去除錯的話，那麼必定會不是很方便，於是這個時候各種瀏覽器中自帶的除錯工具就出來

瀏覽器嵌入自定義JS指令碼

在頁面中嵌入自己寫的Javascript指令碼： Chrome： 1. 開啟chrome擴充套件程式頁 – chrome://extensions 2. 將剛才的自定義指令碼儲存為以user.j

JS指令碼實現瀏覽器自動點選（阿里員工秒殺月餅）

秒殺活動頁面 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

JS指令碼實現瀏覽器自動點選（阿里員工秒殺月餅）(轉)

僅為本人學習，筆記使用阿里雲月餅秒殺頁面 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conten

利用谷歌瀏覽器進行前端程式碼除錯（JS，JSP）

首先在瀏覽器開啟需要除錯的介面，按F12，開啟除錯視窗。視窗常用的是介面上的四個：Elements，Console，Sources，Network，下面來介紹各個塊的除錯功能 1、Elements 這個通常用來除錯介面的顯示，比如控制元件位置，大小等，通過點選左上

瀏覽器除錯動態js指令碼的方法

相關推薦