整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在前面：本文包括瀏覽器調試，不包括web移動端調試。本文調試均在chrome瀏覽器進行。
alert
這個不用多說了，不言自明。
console
基本輸出
想必大家都在用 console.log 在控制臺輸出點東西，其實console還有其它的方法：
console.log( "打印字符串" ); //在控制臺打印自定義字符串 console.error( "我是個錯誤" ); //在控制臺打印自定義錯誤信息 console.info( "我是個信息" ); //在控制臺打印自定義信息 console.warn( "我是個警告" ); //在控制臺打印自定義警告信息 console.debug( "我是個調試" ); //在控制臺打印自定義調試信息 cosole.clear(); //清空控制臺（這個下方截圖中沒有）
注意上面輸出的error和throw出的error不一樣，前者只是輸出錯誤信息，無法捕獲，不會冒泡，更不會中止程序運行。
格式化輸出
除此以外，console還支持自定義樣式和類似c語言的printf形式：
console.log( "%s年" , 2016 ); //%s表示字符串 console.log( "%d年%d月" , 2016 , 11 ); //%d表示整數 console.log( "%f" , 3.1415926 ); //%f小數 console.log( "%o" ,console); //%o表示對象 console.log( "%c自定義樣式" , "font-size:30px;color:#00f" ); console.log( "%c我是%c自定義樣式" , "font-size:20px;color:green" , "font-size:10px;color:red" );
DOM輸出
下面幾個比較簡單的，就不舉例子了，簡單說一下：
var ul = document.getElementsByTagName( "ul" ); console.dirxml(ul); //樹形輸出table節點，即<table>和它的innerHTML，由于document.getElementsByTagName是動態的，所以這個得到的結果肯定是動態的
對象輸出
var
o = {
name:
"Lily"
,
age:
18
};
console.dir(obj);
//顯示對象自有屬性和方法
對于多個對象的集合，你可以這樣，輸出更清晰：
var
stu = [{name:
"Bob"
,age:
13
,hobby:
"playing"
},{name:
"Lucy"
,age:
14
,hobby:
"reading"
},{name:
"Jane"
,age:
11
,hobby:
"shopping"
}];
console.log(stu);
console.table(stu);
成組輸出
//建立一個參數組 console.group( "start" ); //引號里是組名，自己起 console.log( "sub1" ); console.log( "sub1" ); console.log( "sub1" ); console.groupEnd( "end" );
函數計數和跟蹤
function
fib(n){
//輸出前n個斐波那契數列值
if
(n ==
0
)
return
;
console.count(
"調用次數"
);
//放在函數里，每當這句代碼運行輸出所在函數執行次數
console.trace();
//顯示函數調用軌跡(訪問調用棧）
var
a = arguments[
1
] ||
1
;
var
b = arguments[
2
] ||
1
;
console.log(
"fib="
+ a);
[a, b] = [b, a + b];
fib(--n, a, b);
}
fib(
6
);
注：Chrome開發者工具中的Sources標簽頁也在Watch表達式下面顯示調用棧。
計時
console.time() //計時開始 fib( 100 ); //用上述函數計算100個斐波那契數 console.timeEnd() //計時結束并輸出時長
斷言語句，這個c++調試里面也經常用到。js中，當第一個表達式或參數為true時候什么也不發生，為false時終止程序并報錯。
console. assert ( true , "我錯了" ); console. assert ( false , "我真的錯了" );
性能分析
function
F(){
var
i =
0
;
function
f(){
while
(i++ ==
1000
);
}
function
g(){
while
(i++ ==
100000
);
}
f();
g();
}
console.profile();
F();
console.profileEnd();
注：Chrome開發者工具中的Audits標簽頁也可以實現性能分析。
debugger
這個重量級的是博主最常用的，可能是c++出身，對于單步調試由衷的熱愛。單步調試就是點一下，執行一句程序，并且可以查看當前作用域可見的所有變量和值。而debugger就是告訴程序在那里停下來進行單步調試，俗稱斷點。
右邊按鈕如下：
其實右側還有很多強大的功能：
chrome中的調試技巧
1、DOM元素的控制臺書簽：Chrome開發者工具和Firebug都提供了書簽功能，用于顯示你在元素標簽頁（Chrome）或HTML標簽頁（Firebug）中最后點擊的DOM元素。如果你依次選擇了A元素、B元素和C元素，那么$0 表示C元素， $1 表示B元素， $2 表示A元素（這個和正則表達式的$符號類似，不過順序不同）。
2、如果你想調試f函數，用debug(f)語句可以增加這種斷點。
3、Sources標簽頁左側面板上有一個代碼片段（Snippet）子標簽頁，可用于保存代碼片段，幫你調試代碼。
4、可以用Chrome開發者工具Sources標簽頁中的格式化按鈕（Pretty Print Button）格式化壓縮后的代碼。
5、在Network面板，選擇一個資源文件，右鍵Copy Response可快速復制響應內容。
6、利用媒體查詢，這個主要是在Device Mode調節不同的分辨率顯示。
7、選擇Elements，按 Esc > Emulation > Sensors進行傳感器模擬。
8、點擊漸入效果樣式圖標（紫色圖標），可以預覽動畫效果，并可對相應的貝塞爾曲線(cubic-bezier)進行調節動畫效果。
9、在Source中按住Alt鍵并拖動鼠標進行多列內容選擇。
10、Elements面板右鍵執行DOM元素節點，選擇Force Element State或者點擊右側Toggle Element State圖標可以出發偽類。
11、Network面板中選擇一張圖片，在右側圖片上鼠標右鍵選擇copy it as a Data URI,就可以獲取圖片的Data URL (base64編碼)。
12、通過按住Ctrl鍵可以添加多個編輯光標，同時對多處進行編輯。按下Ctrl + U可以撤銷編輯。
13、Elements面板右側的Style編輯器中，點擊顏色十六進制編碼前的小色塊，會彈出一個調色板。
14、按下Alt鍵并且鼠標雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的所有字節點元素.
15、快捷鍵：
調試過程注意事項
1、避免記錄引用類型
當記錄對象或數組時，永遠記得你在記錄什么。記錄原始類型時，使用帶斷點的watch表達式。如果是異步代碼，避免記錄引用類型。
var
arr = [{ num:
0
}];
setInterval(
function
(){
console.log(arr);
arr[
0
].num +=
1
;
},
1000
);
這里，第一個屬性中對象引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，num的值就已經確定了。之后無論你對同一個引用重新打開多少次都不會變化。
2、盡可能使用 source map。有時生產代碼不能使用source map，但不管怎樣，你都不應該直接對生產代碼進行調試。
家好，自CSS3誕生之日起，網頁特效較之以往變得越來越簡單，樣式也越來越多，那么今天我們來分享下所謂幽靈按鈕的實現方法，首先我們來看下效果：
幽靈按鈕
基本結構圖解
由上圖不難看出，該示例主要由三部分組成，每部分各包含一個圖標（由背景圖像生成）和一個按鈕（由帶邊框的超鏈接生成），按鈕中有一個右指向的箭頭（也由背景圖像生成），除此之外，在效果圖中，當鼠標滑過按鈕時有四條線從四個方向飛入與按鈕邊框重合，這個可以用四對標簽生成，之后通過CSS設置效果。
綜上可得html結構如下：
HTML結構
基本樣式：消除默認樣式，給一個背景顏色，外圍盒子設置一定的寬高并居中對齊。
基本樣式
基本布局：通過浮動實現三列布局，設置相應的寬高和外邊距。
基本布局
圖標背景設置：給用于放置圖標背景的設置inline-block,并給定相應的寬高，然后三個圖標分別以背景圖像的方式添加，并根據實際效果調整大小（要略小于父元素框，因為后面有放大的動畫效果），居中放置。
背景圖標設置
圖標動畫設置：設置鼠標滑過動畫這里主要用到兩個動畫效果，一個是旋轉rotate一個是縮放scale,這里要強調的一點是CSS3中很多動畫效果都需要配合配合過渡屬性transiton使用，否則過渡時長為0，就不會呈現動畫效果，呈現的是動畫后的最終狀態。
圖標動畫
按鈕樣式設置：這里的按鈕由一個超鏈接生成，首先將其display屬性設置為block，給定適當的寬高，2個像素透明度為0.7的邊框（設置透明度是為了后面邊框飛入動畫附帶邊框變亮效果），右指向箭頭由背景圖像生成，根據情況設置合適的大小放在靠右的位置，設置position和transition屬性為后面定義動畫做準備。
按鈕樣式
添加按鈕動畫：首先設置鼠標滑過時邊框變亮，右指向箭頭向右移動10個像素
述
接下來就是邊框飛入效果，這里我們只以上邊框為例，首先設置起始狀態時的樣式（也是公用部分），從效果圖中可以看出，飛入的邊框開始時在上邊框的水平左側但是看不見的，所以給background屬性設為none寬度設為0，給一個2個像素的高度，與固有邊框相同，position為絕對定位left:-100%（top給了一個-1px是根據實際效果調的）。
當鼠標滑過時開始出現，背景變為白色(開始顯現），寬度逐漸變為180px與固有邊框接近，位置最終向右移動到left:-1px的位置。
此處的原理是：開始時設置一個狀態和位置，鼠標滑過時設置一個狀態和位置，然后通過transition過渡屬性使其慢慢呈現出來，產生動畫效果。
公共部分
top
其余部分設置可根據上邊框做相應變化得到，下面給出剩余代碼：
bottom
left
right
聲明：本人也是小白一枚，此文只為相互交流，未經修改，如有錯誤請多指正！
們知道vue項目通常由多個組件構成。然而在使用父子組件的時候，總想在父組件中自定義一些標簽來插入到內部子組件中，而在vue2.1.0+新增了一種插槽機制。
插槽子組件中給你的HTML模板占了一個位置。插槽又分為 匿名插槽、具名插槽、作用域插槽。
1.匿名插槽
當slot沒有指定name屬性值的時候，它隱藏的name屬性為default。一個組件內只有有一個匿名插槽。
父組件:
<template>
<div>
<h2>我是父組件</h2>
<child>
<p>我是默認的插槽</p>
</child>
</div>
</template>
子組件: child.vue
<template>
<div>
<div>我是子組件</div>
<slot></slot>
</div>
</template>
匿名插槽效果
2.具名插槽
具名插槽就是給插槽進行命名。父組件在調用的時候，可以使用v-slot綁定名稱從而實現對應，v-slot也可以縮寫為# 。
子組件:
<template>
<div class="nav-bar">
<!-- <slot name="default"></slot> -->
<div class="left">
<slot name="left1"></slot>
</div>
<div class="center">
<slot name="center1"></slot>
</div>
<div class="right">
<slot name="right1"></slot>
</div>
</div>
</template
父組件:
<template>
<div>
<my-slot-cpn1>
<template v-slot:left1>
<button>左邊按鈕</button>
</template>
<template #center1>
<button>我是中間按鈕</button>
</template>
<template #right1>
<button>右邊按鈕</button>
</template>
</my-slot-cpn1>
</div>
3.作用域插槽
當你想在一個插槽中使用數據時，就要使用作用域插槽的方式。
為了讓 子組件中的數據 在父級的插槽 內容中可用我們可以將 數據 作為 元素的一個特性綁定上去： v-bind:text="text"。
注意：
匿名的作用域插槽和具名的作用域插槽 區別在v-slot:defult="接受的名稱"(defult(匿名的可以不寫，具名的相反要寫的是對應的name))
v-solt可以解構接收 解構接收的字段要和傳的字段一樣才可以 例如 :one 對應 v-slot="{one}"
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
