当前位置: 首页 > Web前端 > HTML

《Web标准与前端开发》和《前端必知的开发调试知识》笔记

时间:2023-03-28 17:51:04 HTML

前端开发与Web标准关于前端开发前端开发的起源、架构、变迁Web自1989年诞生以来,一直由三种技术组成:HTML、HTTP、URL。几年后出现了CSS和JavaScript。Web架构及变迁:只读时代(1989-2005):HTML/CSS/JavaScript体验时代(2005-2010):Ajax/WebAPI/jQuery敏捷时代(2010-至今):Fetch/NodeJs/Webpack前端应用领域ToBusiness表现为一个为企业提供多种服务的网站,是一个规模大、业务范围广的领域。对于Customer来说,直接触及客户的网站,包括电商平台、在线教育、手机H5等,都是ToC应用。对Developer来说,提高web开发效率的工具,比如VSCode等代码编辑器。前端语言、框架、工具前端语言:HTML->StructuralCSS->PresentationalJavaScript->BehavioralWebAssembly现在也可以在浏览器中运行常见的前端框架NodeJs——RyanDahlBabel——SebastianMcKenzieWebpack——TobiasKoppersKoa——TJHolowaychukReact——FacebookVue——游鱼溪前端开发浏览器,深入了解现代浏览器网络推荐阅读,推荐阅读HTTP概览了解学习服务器端开发前端学习路线图万维网联盟ECMA:EcmaInternationalWHATWG:WebHypertextApplicationIETF:InternetEngineeringTaskForceW3C和ECMAW3C标准官网:https://www.w3.orgGitHub:https://github.com/w3c规范查询:https://www.w3.org/TREcmaTC39官网:https://www.ecma-international.orgTC39:https://tc39.esGitHub:https://github.com/tc39W3C流程W3C规范制定流程:TC39流程ECMATC39规范制定过程:如何参加W3C会议年会:咨询委员会、技术全会和咨询委员会工作组会议:月会、各种研讨会ECMA大会大会年会TC39大会前端开发调试必须知道的知识特点前端调试多平台浏览器、Hybrid、NodeJs、小程序、桌面应用...多环境本地开发环境、在线环境...多工具ChromedevTools、Charles、vConsole......多技能Console、BreakPoint、sourceMap、proxy...ChromedevTools在浏览器界面右击“Inspect”或按F12打开,了解各个部分的作用。Elements可用于修改和添加元素、样式等Console控制台可用于打印日志和调试等Sources可用于查看页面资源文件、预览代码、各种断点调试调试等。前端代码本质上是“开源”的。出于安全原因,JavaScript代码通常被压缩,压缩后的代码只有一行并且变得不可读。为了解决这个问题,监控平台存储了SourceMap,使用SourceMap映射源码,调试时可以定位到源码。为了安全起见,在项目上线服务器后删除sourceMap。Performance用于性能分析等网络统计和分析网络请求信息和状态、网速选择等应用显示本地存储相关信息:LocalStorage、SessionStorage、IndexedDB、WebSQL、Cookie移动端H5调试Real机器调试,用手机扫码或者用数据线连接电脑进行调试代理调试,常用工具:Charles:适用于查看和控制网络请求,分析数据Fiddler:类似Charles,适用于Windows平台Whistle:A基于Node.js的跨平台Web调试代理工具。常用开发调试技巧在线即时修改Overrides打开Sources面板下的Overrides,点击SelectfoldersforOverrides。选择一个本地的空文件夹目录,允许授权修改页面中的代码,修改完成后,保存并打开devTools,点击右上角三个小点->更多工具->更改,即可看到全部已做的改动在开发阶段使用代理解决跨域问题使用代理服务器中转解决跨域。客户端向代理发送请求并指定目标,然后代理将请求转发给目标服务器,并将获得的内容返回给客户端反代理技术。使用代理服务器接受互联网上的连接请求,然后将请求转发给内网服务器,并将从服务器得到的结果返回给互联网上请求连接的客户端,此时代理服务器启用为反向代理服务器当本地sourcemap线上不存在SourceMap时,可以使用MapLocal网络映射功能访问本地SourceMap文件。小黄鸭调试方法(doge传说说程序师傅随身带着一只小黄鸭,会在把这只小黄鸭放在桌子上,然后详细的给小鸭解释每一行代码,然后快速定位并解决问题。——《程序员修炼之道》