前端錯誤處理與調試

**

javascript錯誤處理

**
由于javascript本身是動態語言,而且沒有固定的開發工具,因此他普遍認為是最難以調試的語言,在ECMAScript3新增了try-catch和throw以及一些錯誤類型,讓開發人員能適當的處理錯誤,緊接著web瀏覽器也出現了一些javascript的調試程序和工具

錯誤類型:
執行代碼期間可能會發生的錯誤類型有多種,每種錯誤都有對應的錯誤類型,如下

  1. Error 普通錯誤類型
  2. EvalError 類型的錯誤一般使用了eval函數而發生的異常
  3. RangeError 類型的錯誤一般在數值超出相應的范圍時觸發
  4. ReferenceError 這種比較常見 訪問的變量不存在
  5. SyntaxError 這種一般很少見
  6. TypeError 一般是保存變量存在其他的類型
  7. URLError 在使用encodeURL或decodeURL函數時,url格式不正確會報這個URLError錯誤

處理錯誤
我們在項目中最常見的就是使用try-catch來處理

try{.  
// 一般是我們的邏輯代碼,可能會導致錯誤的代碼}catch{
// 在錯誤發生時會在這里進行處理
}// 注意catch后面還有一個finally子句 
function testFinally(){try{return 3}catch{. return 2}finally{reutrn 1}
}
// finally子句他的機制是不管try或catch執不執行,最后finally都會去執行 所以這段代碼// 最后返回的結果是 1 而不是 2 

拋出錯誤
與tru-catch語句相配合的又一個throw操作符,用于隨時拋出自定義錯誤,拋出錯誤時,必須要賦值,至于這個值是什么類,是不做要求的。在執行throw操作符時,代碼會立即停止執行,僅當有try-catch語句捕獲到被拋出的值時,才會繼續執行

throw 1234
throw [1,2,3,4]
throw true
....

一般情況下可以通過某種內置錯誤模擬瀏覽器的錯誤,每種錯誤類型只需要接受一個參數

throw new Error('something bad happend')
throw new TypeError('what type of variable do you take me for ?')
...

還可以創建一個自定義錯誤類型

function CustomerError(message){this.name = 'CustomError'this.message = message
}
CustomerError.prototype = new Error() 
throw new CustomerError ('my message')

錯誤事件

任何沒有通過tru-catch處理的錯誤都會觸發window對象的error事件,而且這事件對于chrome firefox IE 都是支持的。具體方法如下:

// onerror接受三個參數 錯誤消息  錯誤所在的url  某個文本第多少行發生的錯誤,對于我們現在通過vue 或react框架大包之后我們一般只有message這個參數對我們開發人員有人,其他的可能意義不大,這里提一下如果要定位到線上具體的文件的錯誤可以使用sourceMap來定位,這里就不多廢話了。
window.onerror = function (message,url,line){console.log(message)
}

注意常見的錯誤類型
1.數據轉換錯誤
我們使用的非常多的 == 和 != 還有 === 等這些需要在開發的過程中注意

5 == ‘5’  // true 
5 === ‘5’ // false 
1 == true //  true 
1 === true // false
...// 這個看似沒有問題,但是一旦出入的不是數字,可能程序就直接掛了
function concat (str1,str2,str3){let result = str1 + str2if(str3){result += str3}return result 
}再比如數據類型的錯誤:
function resverseSort(values){if(values){  // 這是只要有值過來就過了 values.sort()}if(values != null) { // 不靠譜 values.sort()} if(typeof value.sort == 'function') { // 不靠譜 values.sort()} if(values instanceof Array) { // 這種是比較穩妥的 values.sort()} 
}// 通信錯誤
一般是在與后端對接的時候URL的格式不正確或者發送的數據有問題造成的。
對于URL地址,沒有使用encodeURLComponent()造成的問題 
可以寫一個簡單的函數 function addQueryStringArg(url,name,value){if(url.indexOf("?") == -1){url+= "?"}else{url += "&"}url += encodeURLComponent(name) + '=' + encodeURLComponent(value)
}
const url = 'http://www.some.com'
let newUrl = addQueryStringArg(url,'redir','http://www.something.com?a=1&b=2')

把錯誤記錄到服務器

要記錄js的錯誤記錄系統,先要在服務器上創建一個頁面,或者一個服務入口,再來處理錯誤數據

這個所有瀏覽器都支持,且能夠跨域,可以處理多臺服務器的記錄。

function logError(sev,msg){var img = new Image()img.src = "log.php?sev=" + encodeURLComponent(sev) + "&msg="+ encodeURLComponent(msg)
}一般如果想要記錄,只要出現try-catch的語句可以在catch里面調用這個方法 
try{
}catch(err){
logError('nonfatal' , '某某錯誤失敗:'+ err.message)
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/165014.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/165014.shtml
英文地址,請注明出處:http://en.pswp.cn/news/165014.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

多tab頁表單校驗如何做

多tab頁表單校驗如何做 在多tab頁表單中進行校驗,可以按照以下步驟進行: 創建一個表單對象,用于存儲表單數據和校驗規則。 分為多個tab頁,每個tab頁對應一個表單頁面。 定義每個tab頁中的表單字段及其相應的校驗規則。 在切換…

PHP 賦值、算數和比較運算符 學習資料

PHP 賦值、算數和比較運算符 在 PHP 中,賦值、算數和比較運算符用于對變量進行賦值、進行數學運算和比較操作。以下是對這些運算符的介紹和示例: 賦值運算符 賦值運算符用于給變量賦值。常用的賦值運算符有 、、-、*、/ 等。 示例: $a …

芯能轉債上市價格預測

芯能轉債-113679 基本信息 轉債名稱:芯能轉債,評級:AA-,發行規模:8.8億元。 正股名稱:芯能科技,今日收盤價:12.63元,轉股價格:13.1元。 當前轉股價值 轉債面…

基于遺傳優化的多屬性判決5G-Wifi網絡切換算法matlab仿真

目錄 1.算法運行效果圖預覽 2.算法運行軟件版本 3.部分核心程序 4.算法理論概述 5.算法完整程序工程 1.算法運行效果圖預覽 2.算法運行軟件版本 MATLAB2022a 3.部分核心程序 .......................................................................... %接收功率、網…

數字孿生智慧校園 Web 3D 可視化監測

當今,智慧校園發展階段亟需推動信息可視化建設與發展,將大數據、云計算、可視化等高新技術相融合,為校園師生創造科學智能的學習環境,并實現教學資源最大化和信息服務智能化。幫助學校更好地應用校園可視化技術,提升校…

原型模式 (Prototype Pattern)

定義: 原型模式(Prototype Pattern)是一種創建型設計模式,它用于創建重復的對象,同時保持性能。這種模式的核心思想是通過復制一個已存在的實例來創建新的實例,而不是新建實例并對其進行初始化。原型模式適…

jetson xavier NX深度學習環境配置

文章目錄 jetson xavier NX深度學習環境配置1. SD卡系統燒錄1.1 材料1.2 軟件配置1.3 格式化SD卡1.4 系統鏡像燒錄 2. 環境配置2.1 cuda環境配置2.2 安裝依賴庫2.3 安裝python及依賴環境2.4 安裝pytorch環境 jetson xavier NX深度學習環境配置 1. SD卡系統燒錄 1.1 材料 SD …

面試題 —— 前端精選(1)

文章目錄 前言 闡述 JS 的事件循環 JS 中的計時器能做到精確計時嗎?為什么? 如何理解 JS 的異步? 前言 本文章介紹三道圍繞 JavaScript 的精選面試題 闡述 JS 的事件循環 事件循環?叫做消息循環,是瀏覽器渲染主線程的?作?式…

CentOS虛擬機重置賬號密碼

虛擬機忘記密碼了 一般來說,虛擬機的賬號密碼,工作中都會有文檔記錄,如果忘記了可以查看文檔。但是也有特例,虛擬機的密碼沒有記錄到文檔中,嘗試了很多次依然登錄失敗,這時候就只能重置賬號密碼了。 1.重…

upload-labs關卡13(基于白名單的0x00截斷繞過)通關思路

文章目錄 前言一、回顧上一關知識點二、靶場第十三關通關思路1、看源代碼2、bp進行0x00截斷繞過3、蟻劍連接 總結 前言 此文章只用于學習和反思鞏固文件上傳漏洞知識,禁止用于做非法攻擊。注意靶場是可以練習的平臺,不能隨意去尚未授權的網站做滲透測試…

nginx中proxy_pass的配置

Nginx的官網將proxy_pass分為兩種類型: 不帶URI方式:只包含IP和端口號的,不帶uri(單個/也算uri),比如proxy_pass http://localhost:8080;帶URI方式:在端口號之后有其他路徑的&#…

思維模型 潘多拉效應

本系列文章 主要是 分享 思維模型 ,涉及各個領域,重在提升認知。越是禁止,越是好奇。 1 潘多拉效應的應用 1.1 潘多拉效應在管理中的應用 通用電氣公司曾經推出了一項名為“六西格瑪”的管理方法,該方法旨在通過優化業務流程和提…

Linux終端和命令行

文章目錄 學習Linux終端和命令行一、常用Linux命令的基本使用(一)放大/縮小終端窗口的字體顯示(二)自動補全 二、軟件安裝三、文件和目錄常用命令(一)ls:查看目錄內容1.ls命令說明2.Linux下文件…

Peter算法小課堂—前綴和數組的應用

桶 相當于計數排序&#xff0c;看一個視頻 桶排序 太戈編程1620題 算法解析 #include <bits/stdc.h> using namespace std; const int R11; int cnt[R];//cnt[t]代表第t天新增幾人 int s[R];//s[]數組是cnt[]數組的前綴和數組 int n,t; int main(){cin>>n;for(…

flutter 輸入框組件 高度問題

使用的組件名字為 TestField 組件 TestField 配置 占位文字 設置 decoration 屬性 InputDecoration 中hintText去掉輸入到 輸入框的間距 InputDecoration 中contentPadding EdgeInsets.zero去掉邊框中的間距 InputDecoration 中 使用 isDense:true設置輸入框內文字的顏色 …

Android 11.0 SystemUI 去掉狀態欄wifi流量上下行圖標功能實現

1.概述 在11.0系統定制rom開發中,在關于systemui的定制功能總,在SystemUI 狀態欄上顯示時鐘,電池電量 wifi圖標,在顯示wifi圖標時,網絡實時更新時,但是會時不時顯示上下行圖標 顯得很不美觀,客戶需求要求不顯示上下行圖標,所以需要去掉上下行圖標功能,接下來實現相關功能…

MATLAB算法實戰應用案例精講-【圖像處理】計算機視覺(基礎篇)(二)

目錄 知識儲備 opencv基礎知識 01 什么OpenCV 02 如何部署OpenCV? 03 OpenCV模塊簡介 04 OpenCV基本數據結構

Shell循環:for(一)

語法結構&#xff1a; for 變量名 [ in 取值列表] do 循環體 done 示例1&#xff1a; 1、需求&#xff1a;自動循環創建10個用戶 2、演示&#xff1a; [rootlocalhost ~]# vim for.sh #腳本編寫 #!/bin/bash for i in {1..10} do useradd "user$…

Linux進程通信之共享內存

文章目錄 共享內存原理申請共享內存函數&#xff08;shmget&#xff09;參數key生成key值示例申請共享內存 掛接到進程地址空間函數(shmat)去關聯函數(shmdt)控制共享內存(shmctl)IPC_STATIPC_RMID ipcs其余進程獲取該共享內存進程間通信 進程間通信&#xff1a;IPC&#xff0c…

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-6.0.0.19再使用金山打字通2016

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-6.0.0.19再使用金山打字通2016 在openSUSE Software官網輸入關鍵字deepin-wine搜索得到fedora-deepin-wine6的作者是xuthus5 https://software.opensuse.org/package/fedora-deepin-wine6 在百度貼吧fedora吧的《fedora下的…