电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

老司機常用的幾個JavaScript調試技巧

瀏覽:24日期:2023-11-11 13:36:58

1. debugger

除了console.log, debugger是我們最喜歡、快速且骯臟的調試工具。執行代碼后,Chrome會在執行時自動停止。你甚至可以把它封裝成條件,只在需要時才運行。

if (thisThing) { debugger;}

2. 用表格顯示對象

有時, 有一組復雜的對象要查看。可以通過console.log查看并滾動瀏覽,亦或者使用console.table展開,更容易看到正在處理的內容!

var animals = [ { animal: ’Horse’, name: ’Henry’, age: 43 }, { animal: ’Dog’, name: ’Fred’, age: 13 }, { animal: ’Cat’, name: ’Frodo’, age: 18 }];console.table(animals);

老司機常用的幾個JavaScript調試技巧

3. 使用不同屏幕尺寸

在桌面上安裝不同移動設備模擬器非常棒,但現實確是不可行的。如何調整窗口大小呢?Chrome提供了所需的一切。跳到控制臺并點擊‘切換設備模式’按鈕。觀察窗口變化即可!

老司機常用的幾個JavaScript調試技巧

4. 使用 console.time() 和 console.timeEnd() 測試循環

要得知某些代碼的執行時間,特別是調試緩慢循環時,非常有用。 甚至可以通過給方法傳入不同參數,來設置多個定時器。來看看它是怎么運行的:

console.time(’Timer1’);var items = [];for(var i = 0; i < 100000; i++){ items.push({index: i});}console.timeEnd(’Timer1’);

運行產生了一下結果:

老司機常用的幾個JavaScript調試技巧

5. 將代碼格式化后再調試JavaScript

有時代碼會在生產環境出問題,但是你的source maps沒有部署在生產環境上。不要怕。Chrome可以將您的JavaScript文件格式化。格式化后的代碼雖然不像真實代碼那樣有用,但至少可以看到發生了什么。點擊 Chrome控制臺中的源代碼查看器中的{}按鈕即可。

老司機常用的幾個JavaScript調試技巧

6. 觀察特定函數的調用及參數

在Chrome控制臺中,可以觀察特定的函數。每次調用該函數,就會打印出傳入的參數。

var func1 = function(x, y, z) {//....};

輸出:

老司機常用的幾個JavaScript調試技巧

這是查看傳入函數參數的好方法。但是,如果控制臺提示我們形參的數目就更好了。在上面的例子中,func1期望3個參數,但是只有傳入了2個參數。如果在代碼中沒有處理這個參數,就很可能出錯。

7. 在控制臺中快速訪問元素

控制臺中比 querySelector 更快的方法是使用美元符號, $(’css-selector’) 將返回CSS選擇器的第一個匹配項。 $$(’css-selector’) 將返回所有匹配項。如果多次使用一個元素,可以把它保存為一個變量。

老司機常用的幾個JavaScript調試技巧

8. Postman 很棒(但Firefox更快)

許多開發人員使用Postman查看ajax請求。Postman真的很優秀。但打開一個新的窗口,寫入請求對象,然后再來測試它們,顯得很麻煩。

有時使用瀏覽器更容易。

當你使用瀏覽器查看時,如果請求一個密碼驗證頁面,不需要擔心身份驗證的cookie。下面看,在Firefox中如何編輯并重新發送請求。

打開控制臺并切換到network選項卡。右擊所需的請求,然后選擇編輯并重新發送。現在可以改變任何想要的改的。更改標題并編輯參數,然后點擊重新發送。

下面我用不同的屬性發起的兩次請求:

老司機常用的幾個JavaScript調試技巧

9. 中斷節點更改

DOM是一個有趣的東西。有時候它會改變,你并不知道為什么。 但是,當您調試JavaScript時,Chrome可以在DOM元素發生更改時暫停。你甚至可以監視它的屬性。在Chrome控制臺中,右擊該元素,然后在設置中選擇中斷:

老司機常用的幾個JavaScript調試技巧

本文大部分內容節選自:https://raygun.com/javascript-debugging-tips。

來自:https://www.helloweba.com/view-blog-493.html

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 紧急切断阀_气动切断阀_不锈钢阀门_截止阀_球阀_蝶阀_闸阀-上海上兆阀门制造有限公司 | 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 湖南专升本-湖南省专升本报名-湖南统招专升本考试网 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 横河变送器-横河压力变送器-EJA变送器-EJA压力变送器-「泉蕴仪表」 | 水冷散热器_水冷电子散热器_大功率散热器_水冷板散热器厂家-河源市恒光辉散热器有限公司 | 骨龄仪_骨龄检测仪_儿童骨龄测试仪_品牌生产厂家【品源医疗】 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | 热熔胶网膜|pes热熔网膜价格|eva热熔胶膜|热熔胶膜|tpu热熔胶膜厂家-苏州惠洋胶粘制品有限公司 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 北京网站建设首页,做网站选【优站网】,专注北京网站建设,北京网站推广,天津网站建设,天津网站推广,小程序,手机APP的开发。 | 长城人品牌官网 | 通用磨耗试验机-QUV耐候试验机|久宏实业百科 | 台式核磁共振仪,玻璃软化点测定仪,旋转高温粘度计,测温锥和测温块-上海麟文仪器 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 地磅-电子地磅维修-电子吊秤-汽车衡-无人值守系统-公路治超-鹰牌衡器 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | 幂简集成 - 品种超全的API接口平台, 一站搜索、试用、集成国内外API接口 | 稳尚教育加盟-打造高考志愿填报平台_新高考志愿填报加盟_学业生涯规划加盟 | 紧急切断阀_气动切断阀_不锈钢阀门_截止阀_球阀_蝶阀_闸阀-上海上兆阀门制造有限公司 | 锂电池生产厂家-电动自行车航模无人机锂电池定制-世豹新能源 | 培训中心-翰香原香酥板栗饼加盟店总部-正宗板栗酥饼技术 | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 济南货架定做_仓储货架生产厂_重型货架厂_仓库货架批发_济南启力仓储设备有限公司 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 宁夏档案密集柜,智能密集柜,电动手摇密集柜-盛隆柜业宁夏档案密集柜厂家 | 苏商学院官网 - 江苏地区唯一一家企业家自办的前瞻型、实操型商学院 | 挤奶设备过滤纸,牛奶过滤纸,挤奶机过滤袋-济南蓝贝尔工贸有限公司 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | 微型气象仪_气象传感器_防爆气象传感器-天合传感器大全 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 耐磨陶瓷,耐磨陶瓷管道_厂家-淄博拓创陶瓷科技 | 济南画室培训-美术高考培训-山东艺霖艺术培训画室 |