Web开发 学习 调试 调优

目录

• 快捷操作
• 调试方法
  • 基本调试方法
  • 修改参数和请求重发
• Chrome抓包分析
• 性能优化
• 安全
• cURL请求

---

参考

• 参考：MDN 调试HTML
• 参考：什么是浏览器开发者工具？
• 参考：检查和编辑页面与样式
• 参考：谷歌浏览器调试工具的13个Tips
• 参考：Chrome调试工具进阶技巧

工具参考

• 参考：标记验证服务
• 参考：直接输入验证（直接输入HTML源码进行在线检查）

浏览器参考

• 参考：Chrome
• 参考：Chrome (DEV)
• 参考：Chrome (Canary)

编程学习网站参考

• 参考：Codegym（Java学习）
• 参考：Treehouse
• 参考：Khan Academy（数据结构和算法相关知识）
• 参考：Udemy（在线教育平台）
• 参考：Code4Startup
• 参考：One Month
• 参考：PluralSight
• 参考：Coursera
• 参考：Freecodecamp（基于项目的作业）
• 参考：Codewars（代码练习网站）

LeetCode刷题参考：

• 参考：LeetCode题解

---

日志

---

快捷操作

1. F12进入调试界面。
2. 常用鼠标右击→检查，找到相应组件对应的HTML语言位置及其相应的属性情况。
3. 调试界面console中，快捷键：ctrl+L为清屏操作。
4. 点击调试界面左上角的箭头，可以让鼠标定位找到网页中各个组件在HTML源代码中的位置（或者鼠标右击，选择检查）。
5. 使用左上角箭头找到需求组件在HTML源代码中的位置后，在console中输入$0即代表所选中的组件。
6. 在console中输入$("#id")，然后回车，可以看到当前组件的所有属性，以及展开在proto找到相应属性的配置方法。
7. 会出现较乱的Source源码，可以点击左下角的"{}"，即可展开为方便查看的形式。

调试方法

基本调试方法

• 参考：console命令详解

1. F12进入调试界面，在Sources中找到源文件，打断点进行调试。

2. 在源文件代码中增加“debugger”，在代码运行时候，打开F12进入调试界面。

3. F12进入调试界面，在Elements窗口中，键盘Ctrl+Shift+F，进行查找。或者在控制台Network中，Search/Filter中搜索JS文件名称，找到该JS文件，并进入右击Open in Source panel进入源码调试。

4. 预览页面中，查看页面（Page）是否有调用服务（Service）成功的方式：F12后，在Network中查看调用的服务，以及服务中传入的参数（报表详细信息，可以看到页面调用的服务，以及传入的参数信息）（如有报错，在调试窗口的右上角可以看到有红色×的 图标，点击红色×进行调试）。

5. 显示信息的命令：console.log("Hello, world!");或者console.error("Hello, world!");调试，在浏览器的F12的Console中刷新即可看到打印的调试信息console.log("Hello, world!");需要在F12的Console中勾选info选项）。

   console.log("Hello, world!") // 或者`console.error("Hello, world!");`调试，在浏览器的F12的Console中刷新即可看到打印的调试信息`console.log("Hello, world!");`需要在F12的Console中勾选info选项）。
   console.log("Hello, world!"); // 用于输出普通信息
   console.info("Hello, world!"); // 用于输出提示性信息
   console.error("Hello, world!"); // 用于输出错误信息
   console.warn("Hello, world!"); // 用于输出警示信息
   console.debug("Hello, world!"); // 用于输出调试信息console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
   console.log("%年%月%日", 2011, 3, 26);
   console.log("圆周率是：%f", 3.1415926);
   

6. 占位符：console.log("Hello, world!, %s");
   
   支持的占位符：支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

   console.log("Hello, world, date: %d年%d月%d日", 2020, 01, 02); // Hello, world, date: 2020年1月2日
   console.log("Hello, world, dog object: ", { name: "Hei", age: 11 }); // Hello, world, dog object:  { name: 'Hei', age: 11 }
   

7. 分组显示：如果信息太多，可以分组显示，用到的方法：console.group()和console.groupEnd()

   // 分组显示
   console.group("第一组信息");
   console.log("第一组第一条");
   console.log("第一组第二条");
   console.groupEnd();
   console.group("第二组信息");
   console.log("第二组第一条");
   console.log("第二组第二条");
   console.groupEnd();
   
   // 输出结果：
   // 第一组信息
   //   第一组第一条
   //   第一组第二条
   // 第二组信息
   //   第二组第一条
   //   第二组第二条
   

8. console.dir(obj)：显示对象所有属性和方法

9. console.dirxml(element)：显示网页的某个节点（node）所包含的html/xml代码

   let footer = document.getElementById("footer");
   console.dirxml(footer);
   

10. console.assert(expression)：用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

11. console.trace(element)：用来追踪函数的调用轨迹。

12. 计时功能：console.time(timerName); console.timeEnd(timerName);

    console.time("计时器1");
    console.log("Hello, world!");
    console.timeEnd("计时器1");
    

13. 性能分析：性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile(profileName) console.profileEnd(profileName)。

    function Foo() {
        for (var i = 0; i < 10; i++) { funcA(1000); }
        funcB(10000);
    }
    
    function funcA(count) {
        for (var i = 0; i < count; i++) { }
    }
    
    function funcB(count) {
        for (var i = 0; i < count; i++) { }
    }
    
    // 使用性能分析功能
    console.profile('性能分析器一');
    Foo();
    console.profileEnd("性能分析器一");
    

    控制台会显示一张性能分析表，标题栏提示，一共运行了12个函数，共耗时2.656毫秒。其中funcA()运行10次，耗时1.391毫秒，最短运行时间0.123毫秒，最长0.284毫秒，平均0.139毫秒；funcB()运行1次，耗时1.229ms毫秒。

    除了使用console.profile()方法，firebug还提供了一个【概况】（Profiler）按钮。第一次点击该按钮，"性能分析" 开始，你可以对网页进行某种操作（比如ajax操作），然后第二次点击该按钮，"性能分析"结束，该操作引发的所有运算就会进行性能分析。

14. F12 控制台引入jQuery库

    var importJs = document.createElement('script') // 在页面新建一个script标签
    importJs.setAttribute("type", "text/javascript") // 给script标签增加type属性
    importJs.setAttribute("src", 'http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js') // 给script标签增加src属性， url地址为cdn公共库里的
    document.getElementsByTagName("head")[0].appendChild(importJs) // 把importJs标签添加在页面
    

15. 当代码执行异常，但控制台又无报错时候，可以在F12 控制台右上方调试栏（Don't pause on exception ）

修改参数和请求重发

1. F12打开控制台，在Network中，对需要修改参数的请求内容，右键，Copy > Copy as fetch。

Chrome抓包分析

推荐软件：HttpWatch（需要同时安装Chrome扩展包和安装包）

性能优化

1. 减少请求：
   1. 删除无用请求；
   2. 减少重复请求；
   3. 合并多个请求（如：【提交】时候，提交前和提交后等校验，尽量在一个服务请求中完成）；
   4. 删除非必要的后台校验；
2. 优化请求：分析耗时较长的请求，能否进一步优化；
3. 请求异步化：分析同步请求能否转换为异步请求执行；
4. 表结构优化：如使用聚合索引（varchar）代替普通的文本类型，在查询时候，group by, having 等场景对比非常明显；
5. 查询SQL性能优化；
6. 页签的懒加载：在点击相应页签时候，才开始该页签的请求；

安全

1. A类
   1. 未公开接口；
   2. 审计日志记录：增删改类服务以及其它重要操作，需要记录日志；
   3. 敏感数据与加密保护：如联系人电话、邮箱等敏感信息需要进行脱敏处理；
2. B类
   1. SQL注入：单引号+转换处理，入参加长度+特殊字符处理；
   2. URL越权：资源权限配置（服务、页面对应的能访问的角色）；
   3. 前后台校验：前后台一致性；
   4. 反射型XSS：从后台获取到的参数进行转化，做到所见即所得，如 <script>alert(1)</script>；
   5. 存储型XSS：长度+特殊字符、存在性校验、白名单等，防止出现XSS注入；
   6. 数据越权：个人只能访问权限范围内（如地区部、代表处、国家）的数据内容；
   7. 资源越权：比如相应的操作只能指定的某一些人进行操作；

cURL请求

输入以下命令测试能否与目标进行连接。

按Windows+R键，输入“cmd”，打开命令终端。

curl <URL>

• 默认发送GET请求。

  curl <URL>
  
  # 或者
  curl -X -GET <URL>
  

• 发送POST请求。

  curl -X -POST <URL>
  
  # 或者
  curl -XPOST <URL>
  
  # 示例
  curl -XPOST https://jsonplaceholder.typicode.com/posts
  

• 发送POST请求，携带数据。

  curl -XPOST <URL> -d <数据>
  
  # 示例
  curl -XPOST https://jsonplaceholder.typicode.com/posts -d '{"title": "Hello World"}'
  

• 发送POST请求，更新数据。

  curl -XPUT https://jsonplaceholder.typicode.com/posts/1 -d  '{"title": "Hello World 2"}'
  

• 发送POST请求，删除数据。

  curl -XDELETE https://jsonplaceholder.typicode.com/posts/1
  

• HTTP首部。

  curl <URL> -H <首部>
  
  # 示例1
  curl -XPOST https://jsonplaceholder.typicode.com/posts -H 'Content-Type:application/json' -d '{"title": "Hello World"}'
  
  # 示例2，添加多个首部
  curl -XPOST https://jsonplaceholder.typicode.com/posts -H 'Content-Type:application/json' -H ''A-cc-dept:ap-ation/json -d '{"title": "Hello World"}'
  

• 获取浏览器中响应的所有首部。

  curl -I <URL>
  
  # 示例
  curl -I https://jsonplaceholder.typicode.com/posts
  

• 下载文件。默认下载到当前文件夹中。

  curl -O <URL>
  

  自定义文件名。

  curl -o 文件名 <URL>
  

  限制下载速度。默认单位为“字节”。

  curl --limit-rate <速度> <URL>
  
  # 示例
  curl --limit-rate 100k <URL>
  

  恢复下载速度。

  curl -C - <URL>
  

• 跟随重定向。

  curl <URL> -L
  
  # 示例
  curl https://www.bilibili.com/ -L
  

• 查看请求问题。请求连接信息、相应的首部信息等都会展示出来

  curl -v <URL>
  
  curl -v -L <URL>
  

• 通过代理请求目标地址。

  curl --proxy <协议://用户名:密码@代理地址:端口> <URL>
  

• FTP协议请求。

  curl -u <用户名:密码> -O <ftp://server/egg.avi>
  

• FTP协议请求，上传文件。

  curl -u <用户名:密码> -T <文件> <ftp://server/egg.avi>