风中绝响
风中绝响

Javascript的调试利器：Firebug使用详解1（转）

（转： 天晓得的专栏 ）Javascript 的调试，是开发 Web 应用尤其是 AJAX 应用很重要的一环，目前对 Javascript 进行调试的工具很多，我比较喜欢使用的是 Firebug 。 Firebug 是 Joe Hewitt 开发的一套与 Firefox 集成在一起的功能强大的 web 开发工具，可以实时编辑、调试和监测任何页面的 CSS 、 HTML 和 JavaScript 。
本文主要是为初学者介绍一下 Firebug 的基本功能与如何使用 Firebug 。由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！
 
<!--[if !supportLists]--> 1、  <!--[endif]--> 安装
Firebug 是与 Firefox 集成的，所以我们首先要安装的事 Firefox 浏览器。安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的 search 输入框中输入“ firebug ”。等搜索结果出来后点击 Firbug 链接（图 1-1 红色圈住部分）进入 Firebug 的下载安装页面。
 
<!--[if !vml]--> <!--[endif]-->
图 1-1
 
在页面中点击 Install Now （图 1-2 ）按钮。
 
<!--[if !vml]--> <!--[endif]-->
图 1-2
 
在弹出窗口（图 1-3 ）中等待 3 秒后单击“立即安装”按钮。
 
<!--[if !vml]--> <!--[endif]-->
图 1-3
 
等待安装完成后会单击窗口（图 1-4 ）中的“重启 Firefox ”按钮重新启动 Firefox 。
 
<!--[if !vml]--> <!--[endif]-->
图 1-4
 
当 Firefox 重启完后我们可以在状态栏最右边发现一个灰色圆形图标（ <!--[if !vml]--> <!--[endif]--> ），这就表示 Firebug 已经安装好了。灰色图标表示 Firebug 未开启对当前网站的编辑、调试和监测功能。而绿色（ <!--[if !vml]--> <!--[endif]--> ）则表示 Firebug 已开启对当前网站进行编辑、调试和监测的功能。而红色图标（ <!--[if !vml]--> <!--[endif]--> ）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有 5 个错误。
 
<!--[if !supportLists]--> 2、  <!--[endif]--> 开启或关闭 Firebug
单击 Firebug 的图标或者按 F12 键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是 Firebug 的控制窗口（图 2-1 ）。如果你不喜欢这样，可以按 CTRL+F12 或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为 Firebug 的控制窗口。
 
<!--[if !vml]--> <!--[endif]-->
图 2-1
 
从图 2-1 中我们可以看到，因为我们开启 Firebug 的编辑、调试和监测功能，所以目前只有两个可以选择的链接：“ Enable Firebug ”与“ Enable Firebug for this web site ”。如果你想对所有的网站进行编辑、调试和检测，你可以点击“ Enable Firebug ”开启 Firebug ，则以后无论浏览任何网站， Firebug 都处于活动状态，随时可以进行编辑、调试和检测。不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测，所以我们只单击“ Enable Firebug for this web site ”开启 Firebug 就行了。
开启 Firebug 窗口（图 2-2 ）后，我们可以看到窗口主要有两个区域，一个是功能区，一个是信息区。选择功能区第二行的不同标签，信息区的显示会有不同， Options 的选项也会不同，搜索框的搜索方式也会不同。
 
<!--[if !vml]--> <!--[endif]-->
图 2-2
 
要关闭 Firebug 控制窗口单击功能区最右边的关闭图标或按 F12 键就行了。如果要关闭 Firebug 的编辑、调试和监测功能，则需要单击功能区最左边的臭虫图标，打开主菜单，选择“ Disable Firebug ”或“ Disable Firebug for xxxxx ”。
 
<!--[if !supportLists]--> 3、  <!--[endif]--> Firebug 主菜单
 
单击功能区最左边的臭虫图标可打开主菜单（图 3-1 ），其主要功能描述请看表 1 。
 
<!--[if !vml]--> <!--[endif]-->
图 3-1
 
菜单选项
说明
Disable Firebug
关闭 / 开启 Firebug 对所有网页的编辑、调试和检测功能
Disable Firebug for xxxxx
关闭 / 开启 Firebug 对 xxxxx 网站的编辑、调试和检测功能
Allowed Sites
设置允许编辑、调试和检测的网站
Text Size ： Increase text size
增大信息区域显示文本的字号
Text Size ： Decrease text size
减少信息区域显示文本的字号
Text Size ： Normal text size
信息区域以正常字体显示
Options ： Always Open in New Window
设置 Firebug 控制窗口永远在新窗口打开
Show Preview tooltips
设置是否显示预览提示。
Shade Box Model
当前查看状态为 HTML ，鼠标在 HTML element 标签上移动时，页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。
Firebug Website..
打开 Firebug 主页。
Documentation..
打开 Firebug 文档页。
Discussion Group
打开 Firebug 讨论组。
Contribute
打开捐助 Firebug 页面。
表 1
 
<!--[if !supportLists]--> 4、  <!--[endif]--> 控制台（ Console ）
单击功能区第二栏的“ Console ”标签可切换到控制台（图 4-1 ）。控制台的作用是显示各种错误信息（可在 Options 里定义），显示脚本代码中内嵌的控制台调试信息，通过命令行对脚本进行调试，通过单击 Profile 对脚本进行性能测试。 控制台分两个区域，一个是信息区，一个是命令行，通过 Options 菜单的“ Larger Command Line ”可改变命令行位置。
 
<!--[if !vml]--> <!--[endif]-->
图 4-1
 
    Options 菜单的选项请看表 2 。
 
菜单选项
说明
Show JavaScript Errors 显示脚本错误。
Show JavaScript Warnings
显示脚本警告。
Show CSS Errors
显示 CSS 错误。
Show XML Errors
显示 XML 错误。
Show XMLHttpRequests
显示 XMLHttpRequests 。
Larger Command Line
将命令行显示从控制窗口底部移动右边，扩大输入区域。
表 2
 
单击“ Clear ”按钮可清除控制台的控制信息。
 
<!--[if !supportLists]--> 5、  <!--[endif]--> 页面源代码查看功能
单击功能区第二栏的“ HTML ”标签可切换到源代码查看功能（图 5-1 ）。虽然 Firefox 也提供了查看页面源代码的功能，但它显示的只是页面文件本身的源代码，通过脚本输出的 HTML 源码是看不到。而 Firebug 则是所见即所得，是最终的源代码。
 
<!--[if !vml]--> <!--[endif]-->
图 5-1
 
我们来看一个例子，文件源代码如下：
 
<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title> 简单的例子 </title>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
       <style>
              #div1{background:red;width:100px;height:100px;}
              #div2{background:blue;width:100px;height:100px;margin:10px;padding:10px;border:5px solid black;color:white;}
              #div3{background:yellow;width:50px;height:50px;margin-left:25px;}
       </style>
</head>
<body scroll="no">
  <div id="div1"> 方块一 </div>
  <div id="div2"> 方块二 </div>
  <script>
     document.getElementById('div1').innerHTML+='<div id="div3"> 方块三 </div>';
  </script> 
</body>
</html>
  
在例子中我们通过 JavaScript 在“ div1 ”中加入了“ div3 ”，在 Firefox 中查看源代码你是看不到“ div1 ”中包含有代码“ <div id="div3"> 方块三</div> ”的，但是 Firebug 中我们是可以看见的（图 5-2 选中部分）。
 
<!--[if !vml]--> <!--[endif]-->
图 5-2
 
从图 5-1 中我们可以看到，信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到 HTML Element 中的 CSS 定义、布局情况和 DOM 结构。
从图 5-2 中我们可以看到，源代码按 DOM 结构分层次显示的，通过层次折叠功能，我们就可以很方便分析代码。在功能区的第一行还根据你的选择，清晰的按子、父、根列出了当前源代码的层次（图 5-2 红色部分），单击各部分，则会即刻转到该部分的源代码。
 
<!--[if !vml]--> <!--[endif]-->
图 5-3
 
在源代码上移动鼠标，页面就会出现一个半透明的方块，指示当前鼠标所指源代码的显示区域，当选择。在图 5-4 中，鼠标正指向“ div1 ”，而在页面中“ div1 ”的显示区域上被一个半透明的方块遮盖了。
<!--[if !vml]--> <!--[endif]-->
图 5-4
如果你把“ Inspect ”按钮按下，功能正好相反，在页面中移动鼠标，则当前显示区域的源代码会被加亮显示出来。在图 5-5 中，我们可以看到鼠标指针正指向“方块二”，而在源代码中可以看到，“方块二”的源代码“ <div id="div2"> 方块二</div> ”已被加亮显示（红色部分）。如果你单击某个显示区域，则该区域的源代码会被选中。
 
<!--[if !vml]--> <!--[endif]-->
图 5-5
是不是很方便？方便是方便，但是我的源代码很多，而且有些区域在页面中不方便鼠标指定，怎么办？没关系，我们还有一个厉害武器，搜索功能。譬如我们知道某个 HTML Element 的 ID 是“ div2 ”，但在层层叠叠的源代码中不好找，在页面中鼠标也很难找到，那我们就在功能区的搜索框中输入“ div2 ”，再看看源代码区域，“ div2 ”被加亮显示出来了（图 5-6 红色部分）。在这个简单的例子可能看不出很好的效果，大家可以尝试一下把“ div1 ”先折叠起来，然后在搜索框输入“ div3 ”，你可以看到“ div1 ”会自动展开，并将“ div3 ”加亮显示，如果还觉得不够理想，可以找一个源代码比较多的例子测试一下。
<!--[if !vml]--> <!--[endif]-->
图 5-6
 
除了通过按下“ Inspect ”按钮，单击显示区域选择源代码，我们还可以通过单击源代码中的 HTML 标记（开始或结束标记都可以）来选择。我们尝试一下把鼠标移动到 HTML 标记，会发现鼠标指针变成了手的形状，这说明我们可以通过单击选择该源代码。选择源代码后，我们就可以通过右边的功能区查看、编辑和调试它的 CSS 定义和盒子模型（ CSS 盒子模型请参阅相关说明，这里就不再赘述了），还有一个很好的功能就是当外部编辑器修改了源代码（没有删除该源代码，只是修改），我们在浏览器重新加载页面后，选择的源代码不会改变，我们可以很方便的观察源代码的变化与效果。
有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换，一次又一次的刷新而感到懊恼？有了 Firebug 你就不用再懊恼了。你可以直接在源代码中进行编辑，然后查看效果。如果只是修改已经存在的属性，例如要修改“ div2 ”的内部文本，则直接将鼠标移动到文本上面，等鼠标指针换成“ I ”，单击即可进行编辑了。其它已存在的属性和属性值也可以这样直接进行编辑。如果要为某 Element 添加属性，请将鼠标移动到该 Element 上，等光标变为“ I ”的时候，单击鼠标右键，从菜单中选择“ New Attribute.. ”，在显示的编辑框中输入你要添加的属性名称就可以了。
<!--[if !vml]--> <!--[endif]-->
图 5-7
 
<!--[if !vml]--> <!--[endif]-->
图 5-8
我们尝试一下为“ div2 ”增加一个“ onclick ”属性，单击的结果是将“ div2 ”的显示文本修改为“单击”。把光标移动到“ div2 ”上，然后单击鼠标右键，选择“ New Attribute.. ”（图 5-7 ），在编辑框中输入“ onclick ”，最后按一下回车键（图 5-8 ），出现属性值输入框后，输入“ this.innerHTML=’ 单击 ’ ”，回车后我们可以继续添加下一个属性，这次测试不需要，所以按 ESC 结束我们的输入。我们来检验一下修改结果，单击页面“ div2 ”的区域（图 5-9 ），“ div 2 ” 的显示文本已修改为“单击”了，而源代码也改变了。有没有发现，“div 2 ” 被加亮显示了？这又是Firebug 的一个功能。只要我们通过页面中的操作修改了 Element 的属性， Firebug 就会在源代码中通过加亮的方式指示当前操作修改那些属性值。譬如我们单击某个链接修改了一个 iframe 里的 src ，那么这个 src 的属性值就会被加亮显示。 又譬如我们单击某个链接修改了一个 image 里的图像，那么它的 src 属性值也会被加亮显示。我们可以通过 Options 菜单里的“ Highlight Changes ”设置是否加亮显示改变。而“ Expand Changes ”则是设置被改变的源代码折叠起来看不见时展开让它可见。而“ Scroll Changes into view ”则是源代码很多，被改变的源代码不在可视区域时，将被改变的源代码滚动到可视区域。
<!--[if !vml]--> <!--[endif]-->
图 5-9


 
有时候我们不单是要增加一两个属性，而是要做更多的修改，这怎么办呢？很简单，选择你要更改 Element ，然后单击功能区第一行的“ Edit ”按钮或者直接将鼠标移动到要修改的 Element 上，单击鼠标右键，选择“ Edit HTML.. ”，这时候，源代码区域将切换到编辑状态，你可以随意的修改你选择的源代码了。我们尝试修改一下“ div2 ”，将被修改显示文本修改回“方块二”，我们选择“ div2 ”，然后单击“ Edit ”按钮（图 5-10 ），将显示文本修改回“方块二”，然后再次单击“ Edit ”按钮退出编辑状态，如果要放弃修改，可以按 ESC 键退出。因为是所见即所得的，所以我们在修改的时候，页面会同时刷新显示。
<!--[if !vml]--> <!--[endif]-->
图 5-10
如果要修改 Element 的 CSS 定义怎么办？很简单，选择该 Element ，然后在右边的窗口选择“ Style ”标签，这里显示的就是当前 Element 的 CSS 定义了。我们在这里可以对 CSS 定义进行添加、编辑、删除、禁止等操作。我们尝试一下把“ div2 ”的背景色禁止了看看。将鼠标移动到“ background ”这行（图 5-11 ），我们可以看到在这行的最右边会有一个灰色的禁止图标，只要单击这个禁止图标，就可以禁止了这个 CSS 属性了。我们单击这个图标看看效果，页面中的“ div2 ”已经变成白色背景了，而禁止图标也变成红色，而文本会则变成灰色（图 5-12 ），这说明已经禁止了“ background ”了。当然了，这个操作也可以通过鼠标右键的“ Disable XXXXX ”来实现（ XXXXX 表示当前选择的 CSS 属性）。我们再次单击禁止图标，恢复“ background ”属性。我们这次要把“ background ”的颜色由蓝色（ blue ）修改为绿色（ green ）。我们把鼠标移动到“ background ”属性值“ blue ”上（图 5-13 ）。怎么会出现一个蓝色背景的方框？这是 Firebug 提供背景预览功能，让我们很直观的知道当前背景是什么。如果背景是图片的话，显示的将是背景图片的缩略图。继续我们的操作，单击属性值，在出现的编辑框中将“ blue ”修改为“ green ”。好了，背景已经修改为绿色了。现在的显示文本是左对齐的，我想让它居中对齐，这需要在 CSS 里加一个“ text-align ”的属性，值为“ center ”。请在 CSS 上单击鼠标右键，在菜单中选择“ New Property.. ”，在编辑框中输入“ te ”， Firebug 已通过自动完成功能帮我们输入“ text-align ”了（图 5-14 ），按 Tab 键或回车，在属性值中我们输入“ c ”， Firebug 再次帮我们自动完成了“ center ”（图 5-15 ），按 Tab 键或回车完成输入，如果不需要继续输入新属性，按 ESC 或单击鼠标取消输入。文本“方块二”现在已经居中显示了。如果忘记了某个属性值有那些选项怎么办？不要紧，在输入属性值的时候可以通过上、下箭头选择我们需要的属性值。
在“ Style ”标签里我们可以选择“ Options ”菜单里的“ Show Computed Style ”查看浏览器默认的风格定义。
 
<!--[if !vml]--> <!--[endif]-->
图 5-11
 
<!--[if !vml]--> <!--[endif]-->
图 5-12
 
<!--[if !vml]--> <!--[endif]-->
图 5-13
 
<!--[if !vml]--> <!--[endif]-->
<!--[if !vml]--> <!--[endif]-->
图 5-14
图 5-15

你可能感兴趣的:(JavaScript,Firebug,职场,休闲)

  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 上班族可以做线上副业兼职有哪些？盘点7个适合上班族做的副业兼职！ 高省APP大九
    对于许多上班族来说，工资往往不能满足他们的生活需求，因此许多人开始寻找副业来增加收入。以下是一些适合普通人的副业赚钱路子，希望能给您带来一些灵感。1、做好物推荐现在很多职场人其实有大量的个人时间，只不过这些个人时间比较碎片化，他们不能够很好的利用起来，其实可以利用这些碎片化的时间去做副业，比如做好物推荐。在网上有很多的平台，比如头条抖音等等都开通了一个商品的分销功能，只要你发布相关的视频或者文章，
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 2020年学习什么知识比较好？互联网行业依然是发展较佳 编程仔
    2019年余额已不足，不少职场人心里也在盘点这一年的工作得失，琢磨新一年的奋斗策略，是继续冲刺还是换个跑道？今年跳槽更难吗？image互联网行业一直以相对较丰厚的薪酬和广阔的发展前景吸引着各界人才。但最近，互联网行业寒冬、互联网企业裁员等话题再次引起热议。正在从前些年的高速发展期转向发展调整期的互联网行业真的步入了“寒冬”？该行业依旧具有吸引力吗？什么职位又最热门呢？image互联网行业仍保持较高
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 研究表明，中年人“失业”成为了趋势，关键原因有这4点 舒山有鹿
    01在职场中，一直存在这么一个定律——35岁中年失业定律。很多人都特别疑惑，35岁还未到中年期，为什么人们会把“中年”跟“失业”挂钩呢？有句话，说得很现实：“35岁之前辞职，叫跳槽；35岁之后辞职，叫失业。”一般来说，35岁失业和40岁失业的本质是差不多的。只要他们还未升到管理层，便被单位辞退，就证明他们只能“另谋出路”了。况且，随着环境的愈发复杂，行业问题的频频发生，线下商业的不景气，那中年人找
  • 极度休闲的一天 淡泊孤峰
    国庆国庆，普天同庆。在家躺着看大家游山玩水，长辈走亲戚，我的微信一天没几条消息，标准结局，习惯了。哈利波特系列电影真不错，童年总幻想着像主角哈利一样，像《龙族》少年楚子航浪迹江湖，风云天下。而现在却败给华为ICT大赛题还有永无止境的代码视频，唉，真可笑！
  • 2020年最新程序员职业发展路线指南，超详细！ 编程流川枫 11编程语言程序员互联网IT职业
    【文章来源微信公众号：每天学编程】01、程序员的特性技术出身的职场人特性很明显，与做市场、业务出身的职场人区别尤其明显。IT行业中常见的一些职场角色：老板、项目经理、产品经理、需求分析师、设计师、开发工程师、运维工程师等。开发工程师具有如下特征：1、逻辑思维清晰、严谨和细腻；但是有时不容易转弯，有些程序员容易较劲、钻牛角尖。2、性格偏内向、不善于沟通、表达和交际；但是在网络聊天工具上，有些显为幽默
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 40岁的java程序员，还有出路吗？ cesske java开发语言
    目录前言一、现状与挑战二、出路与机遇三、案例分析与启示四、结语前言40岁Java程序员的出路：挑战与机遇并存在科技日新月异的今天，IT行业始终保持着高速的发展态势，而Java作为其中的重要一员，其地位依然稳固且充满挑战。对于一位40岁的Java程序员而言，面对职业生涯的“中年危机”，是否还有出路？本文将从多个维度探讨这一问题，旨在为这一群体提供思考和启示。一、现状与挑战职场竞争加剧随着技术的不断发
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • 【Death Note】网吧战神之7天爆肝渗透测试死亡笔记_sqlmap在默认情况下除了使用 char() 函数防止出现单引号 2401_84561374 程序员笔记
    网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！特殊服务端口2181zookeeper服务未授权访问
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 2020-03-24 艺鹰空间设计
    从欧美的复古奢华，到现代极简的北欧风，一个太沉闷，一个略单调，设计师梁博，在自己的作品中融入一点点的复古元素，即能保留现代风格的清爽和功能上的便利，又可以收获复古的奢华和优雅，简直是太完美的搭配！古典风格住宅，设计师重新设计，厨房和起居室结合在一起，走廊和厨房起居室之间的墙从地板到天花板变成了一个透明隔断，给空间带来了更多的空气和光线。主卧室的设计颇有高级酒店的味道，左侧设置了休闲椅，右侧则有办公
  • 看的信息越来越多，我却越来越焦虑了…… 灰咖儿
    01看的信息越多，我感到越来越焦虑不知道为什么，有了手机作为消遣，却让人越来越感到焦虑。抖音、快手、知乎、小红书、、今日头条、喜马拉雅、得到……手机里装着越来越多的APP，每一个打开都是扑面而来的信息，除了纯粹的消遣，还为了能够学点东西、提高自己。但是要学的东西实在太多了，大到国际形势、国内经济、历史人文，小到股市分析、楼市信息、潮装搭配、美妆教学、生活技巧、健身诀窍、职场生存，每一个似乎都值得一
  • 莆田鞋十大良心微商推荐，莆田鞋推荐微商排名一览表 腕表鞋屋
    莆田鞋是广受欢迎的一种休闲鞋，因其舒适耐穿而备受消费者喜爱。在如今的微商市场中，有许多卖家代理莆田鞋，但是有些卖家并不那么负责，售卖的鞋子品质堪忧。因此，今天我们就来盘点一下莆田鞋的十大良心微商，为大家推荐一些靠谱的卖家。微信:726865(下单赠送精美礼品)1.小尼鞋铺小尼鞋铺是一家专注于莆田鞋销售的微商店铺，主打高品质的鞋子，深受用户好评。2.快乐小屋快乐小屋作为一个专业的莆田鞋代理店，拥有丰
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 手机小游戏开发 红匣子实力推荐
    随着智能手机的普及，手机小游戏已经成为人们日常生活中不可或缺的一部分。从简单的消除游戏到复杂的策略游戏，手机小游戏为玩家提供了丰富的娱乐体验。本文将为您介绍手机小游戏开发的基本概念、工具和技术。开发-联系电话：13642679953（微信同号）1.游戏类型手机小游戏可以分为多种类型，如益智游戏、休闲游戏、动作游戏、策略游戏等。开发者可以根据自己的兴趣和技能选择合适的游戏类型进行开发。2.开发工具手
  • log4j对象改变日志级别 3213213333332132 javalog4jlevellog4j对象名称日志级别
    log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
  • elk+redis 搭建nginx日志分析平台 ronin47 elasticsearchkibanalogstash
                 elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l
  • Yii2设置时区 dcj3sjt126com PHPtimezoneyii2
    时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
  • js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
  • 持续集成工具 g21121 持续集成
            持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
  • 数据结构哈希表(hash)总结 永夜-极光 数据结构
    1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。  
  • 乱七八糟 程序员是怎么炼成的
    eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2
  • 职场人伤害了“上司” 怎样弥补 aijuans 职场
    由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
  • 深入浅出url编码 antonyup_2006 应用服务器浏览器servletweblogicIE
    出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
  • 建表后创建表的约束关系和增加表的字段 百合不是茶 标的约束关系增加表的字段
      下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加 姓名字段)   alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10);   &nb
  • Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScriptuploadify
    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
  • 精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle数据库plsql
    /* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
  • 【Resin一】Resin服务器部署web应用 bit1129 resin
    工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q
  • red5简介及基础知识 白糖_ 基础
      简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
  • angular.fromJson boyitech AngularJSAngularJS 官方APIAngularJS API
    angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: <!DOCTYPE HTML> <h
  • java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
    public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
  • web实时通讯 Chen.H Web浏览器socket脚本
    关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
  • [基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
          大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   
  • oracle 外部表 daizj oracle外部表external tables
        oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
  • aop相关的概念及配置 daysinsun AOP
    切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
  • 初一上学期难记忆单词背诵第二课 dcj3sjt126com englishword
    middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
  • Linux日志分析常用命令 dcj3sjt126com linuxlog
    1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
  • JSONP 原理分析 fantasy2005 JavaScriptjsonpjsonp 跨域
    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
  • 使用connect by进行级联查询 234390216 oracle查询父子Connect by级联
    使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
  • 一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
    发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
  • UI设计中我们为什么需要设计动效 lampcy UIUI设计
    关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
  • 如何禁止页面缓存 nannan408 htmljspcache
    禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
  • 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同 定时任务管理spring-quartz
          【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
  • EXT实例 tntxia ext
      （1） 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
  • 数学学习在计算机研究领域的作用和重要性 xjnine Math
    最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他