做完网站别忘调试----网站调试全攻略

 更新时间:2016年9月20日 19:04  点击:1857

一个站点制作好后,在细节上肯定还有一些值得调节的地方,比如无效链接,Java、Cookie错误等等,所以网站调试是一个不容忽视的环节。只要利用浏览器就可以完成这项工作。

虽然Internet Explorer(简称IE)在浏览器市场中占据着优势性份额,但并不是说它强大到无可挑剔的地步,除了安全隐患问题,在站长进行网站调试时,也暴露出IE的严重不足。其实,很多站长都利用Mozilla这款老牌的Web浏览器来调试自己的网站,它可以快速、高效、即时地找出网页中存在的问题。

为什么Mozilla比IE更适合调试网站

和IE不同的是,Mozilla不但可以用于网页浏览、网页编辑,更为重要的是Mozilla内置了强大的调试工具,能方便、高效地对站点网页进行JavaScript纠错、Cookie管理、源代码查看、DOM 查看和页面信息查询等,这些都是IE不容易做到的。

运用环境:当IE脚本信息太简单时

在网页编写中使用JavaScript是司空见惯的事情了,当JavaScript出现问题时,在IE浏览器中只会弹出一个简单的错误提示对话框,告诉你该网页有错误1),出错提示信息过于简单,而且无法进行管理,满足不了调试网页工作的需要。这种情况下,我们就可以利用Mozilla来解决。

错误,就这样被“揪出”

Mozilla内置了“JavaScript控制台”,只要你在网页调试时打开JavaScript控制台,就可以看到被记录下的JavaScript 错误提示信息,方便大家找出错误所在,起到即时修正网页错误的目的。

如何利用Mozilla内置的“JavaScript控制台”来快速定位问题所在?其实非常简单。使用Mozilla 浏览器进行网站调试时,依次点击“工具→Web开发→JavaScript控制台”项目后,弹出“JavaScript控制台”对话框2),在列表框中记录着网页的JavaScript出错信息,并且每项错误信息都详细地记录着出错的文件名、JavaScript错误所在行号,以及错误出现时的上下文,这样一来就很容易找出JavaScript出错位置和错误原因。此外,你还可以右键点击错误项目,在弹出的菜单中选择“复制”项目,将JavaScript出错信息复制到剪贴板中,以便保存到其他文件中。

<

新手在制作个人主页的时候常常会犯的错误就是路径的问题,并且还会有文件名或者文件夹名用中文的现象出现,这些我认为都是可以避免的。在这里我就说说自己的一些看法,大家有什么意见就跟贴说明。

首先我要提醒大家,做一个网站的时候大家最好先建立一个站点的文件夹,文件夹中的所有子文件夹或者文件最好不要用中文,因为中文在IE地址栏里是以某种方式形式(具体的是什么方式我就不清楚了,汗……菜的表现啊)。

接下来就说说路径的问题,路径的问题主要分为绝对路径跟相对路径。

绝对路径也就指把你的路径写全了(这样说大家应该可以明白吧),比如你的C盘下面有一个windows文件夹中有notepad.exe这个文件,那么你要写绝对路径也就是c:windowsnotepad.exe。用这个我建议不要用,要用的话也是用在引用他人网站的链接的时候才用。

好处:可以在任何位置使用这个文件

坏处:这个坏处应该是算在网页制作中的。如果这个文件移动了位置,那么将无法正确访问了。

相对路径一般是有[..] [.]以及/等分隔符组成的,就比如你当前所在的位置是C盘,而你想访问C:windowsnotepad.exe这个文件,那么你就可以用windows/notepad.exe这样的路径来访问(当然这些是在DOS时代用的,现在大家都用windows了,很少会用到这样的命令,不过我想大家也应该可以明白的。

说明:

..访问上一级目录中文件

没有任何分隔符而直接使用文件名做链接,比如<a href="index.html">首页</a>。

../../访问多级目录中的文件,../表示一个目录

好处:可以随时访问文件,就算你的整个站点文件夹移动了,还是可以正常访问,不会出现无法访问的错误。

坏处:很容易搞错文件的位置或者目录的位置

提示一下吧:大家做一个网站的时候,最好建立一个站点,那么软件自动会把路径设置成为相对路径,比如dreamweaver或者frontpage都有这个功能的。




说到这个问题,可能有人就会说,那还不简单,直接用flash的ActionScript中的url方法不就搞定了,那么如果我们的UI人员设计完flash,但flash对应的链结还没有确定或者以后会变更怎么办?我需要的是能够在外部修改flash对应的链结。

  那直接在flash所在的object元素外部加<a></a>标签来控制不就行了,可能有些人会这么想,思路正确,但是行不通。呵呵,怎么办?百度一下先,呵呵,真是相当佩服某些人的牛脑,真牛,下面是一种解决的方法:

  首先,我们肯定是要先插入FLASH.因为,Flash默认是最高层.所以, 我经常会遇见Flash把下拉菜单挡住的情况. 把Flash文件放到一个层中,设为最底层,FLASH设为透明.
<div style="z-index:-1"> <!--1.设置FLASH为底层-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="115">
<param name="movie" value="media.swf">
<param name="quality" value="high">
<embed src="http:///htmldata/2005-11-19/media.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="115"></embed>
<param name="wmode" value="transparent"> <!--2.必须把FLASH设置为透明-->
</object> </div>

  再接下来,就是在FLASH的层上再加上一层, Flash本身不能直接加入onclick.等事件,所以,只能借助别的东西啦. 就是在FLASH上加个透明层,
<div id="huiLayer" style="cursor: hand; position:absolute; left:10px; top:10px; width:200px; height:115px; z-index:1; visibility: visible;"><a href="http://www.cnlk.com">
<img src="http:///htmldata/2005-11-19/kong.gif" width="200" height="115" border="0"></a></div>
  论坛上面,给了一些解决方法,就是加个透明的层,但是,如果光有个透明层, 还是不能接受事件的. 更确切地说,是一部分可以,一部分不可以,和FLASH部分重叠的那一部分不行. 为什么不行.说实话,我也不清楚,我是试验得出来的...

  当我把这个层的背景颜色设为任意一种时,不是透明时,发现.可以接受事件了,在层上加了个
超连接,也可以.. 但是,这还不是我们要的结果.因为,把整个"精美"的FLASH给遮盖了.. 所以,有<img src="http:///htmldata/2005-11-19/kong.gif" width="200" height="115" border="0">

  我用PhotoShop做了个透明的图片kong.gif 大小都可以,但是必须是透明的!这样才不至于把底下的FLASH给遮盖住了.

  试验了一下... 成功了... 点击FLASH.其实是击中了FLASH上层的透明图片kong.gif
图片,就可以接受很多事件啦,onclick , onmouseover ,onmosueout ...... 给图片加个<a></a>超连接是再简单不过的事啦.. 这时,以上的问题是不是都解决了,把事件都给kong.gif接受! 单击事件, <div onclick="ok()" id="huiLayer" ...........

  不管是坐火车,还是飞飞机,过年都得回家,所以方法还是有的,Flash本身还提供了一种方法,相当的好用,就是在Flash内部通过FSCommand调用外部的脚本,个人认为这种方法简单实用,可控能力强,具体用法,就不在这里多说了,你在网上搜FSCommand关键键字就会啊到很多实例,不过还是有一点提示:在提供javascript版本的调用方法时,最好也提供一个vbscript的版本,否则调用可能会不成功。 Alexa是一个发布全球网站排名信息的网站,他的网址是http://www.alexa.com。Alexa通过在客户端安装Alexa工具条来收集采样全球网站的访问数据,以这些数据为依据对全球网站进行排名,类似于电视收视率的统计。Alexa工具条是一种类似于Google工具条的IE插件,你可以在下面URL中下载:http://download.alexa.com/index.cgi。

  一、Alexa工具条的工作原理

  Alexa工具条是一种基于BHO和Toolbar Bands技术的一种IE插件。它以DLL文件的形式存在于系统中,是一种COM组件,IE会在运行时将其加载到自身进程中去,所以一般情况下防火墙是无法禁止该软件访问网络的,这就为他的木马角色提供了先天的便利,而且比本机Sniff软件收集密码的优势是:无论是HTTP还是HTTPS的网站,不管通信通道是否加密,只要是IE页面的表单都能收集到。具体原理可以查阅《关于Alexa排名作弊的一些解惑》。

  系统在安装了Alexa工具条后,会在系统目录下生成AlxTB1.dll和AlxRes.dll两个DLL文件(有些情况下是AlxTB2.dll,而不是AlxTB1.dll。那是因为Alexa工具条会自动上网更新的原因)。Alexa工具条的主要二进制代码存在于AlxTB1.dll文件中,这个文件同时也被注册成多个COM组件,他完成了BHO和Toolbar Bands的COM接口,并将IE的WebBrowser控件封装为一个COM组件供AlxRes.dll调用。AlxRes.dll文件仅包含少量的二进制代码,大量的代码是HTML和javascript代码,他们以资源的形式存在于AlxRes.dll文件中,你可以通过res://AlxRes.dll/CHTML/about.html这样的URL来访问这些资源。也许你会奇怪:又不是做网站,为什么软件的代码会是javascript写的?这就是Alexa工具条垃圾的地方。Alexa工具条的主界面是由HTML+javascript实现的。这些javascript代码通过调用AlxTB1.dll实现的COM接口来实现软件的全部功能。这样做不仅导致软件的效率低下,而且产生大量的资源泄漏,绝对是一种VERY超级SB的开发模式,但是却为我们修改Alexa工具条的功能提供了方便——根本不需要CRACKER知识,只要一个PE资源修改工具就可以对Alexa工具条的代码进行修改了。

  二、破解Alexa工具条

  当然,Alexa也不是真傻,绝对不会蠢到让自己的代码被你用资源修改工具随便改。为了防止AlxRes.dll中的资源被随意修改,他采取了计算文件校验和的保护方法,要是发现文件被修改,就会拒绝加载。我们在修改代码前,必须破解这种保护机制。

  AlxTB1.dll导出一个名叫ChecksumResources的函数,这个函数就是用来计算文件校验和的。用c32asm反汇编AlxRes.dll文件,查看字符串调用列表,找到"ChecksumResources"字符串,跳转到调用该字符串的代码,于100017C0处。往下翻几行,在100017F6处找到一句跳转,采用爆破方式,用NOP指令覆盖JNZ指令即可。通俗点讲:就是将AlxRes.dll文件偏移"0x17F6"处的两个字节"75 11"改成"90 90",你可以使用WinHex之类的16进制编辑软件来修改。

::100017C0:: 68 9C700010 PUSH 1000709C :BYJMP JmpBy:100017A4,100017B1, ->: ChecksumResources
::100017C5:: 57 PUSH EDI
::100017C6:: FF15 1C500010 CALL [1000501C] >>>: KERNEL32.DLL:GetProcAddress
::100017CC:: 85C0 TEST EAX, EAX
::100017CE:: 74 0E JE SHORT 100017DE :JMPDOWN
::100017D0:: 8D4D DC LEA ECX, [EBP-24]
::100017D3:: 51 PUSH ECX
::100017D4:: FF35 44740010 PUSH DWORD PTR [10007444]
::100017DA:: FFD0 CALL EAX
::100017DC:: 59 POP ECX
::100017DD:: 59 POP ECX
::100017DE:: 57 PUSH EDI :BYJMP JmpBy:100017CE,
::100017DF:: FF15 18500010 CALL [10005018] >>>: KERNEL32.DLL:FreeLibrary
::100017E5:: 8D45 B8 LEA EAX, [EBP-48]
::100017E8:: 50 PUSH EAX
::100017E9:: 8D45 DC LEA EAX,

<

  1. 了解你的网站所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如,如果在设计一个强调稳健的金融机构,那么就要选择冷色系、柔和的颜色,像是蓝、灰或绿。在这样的状况下,如果使用暖色系或活泼的颜色,可能会破坏了该网站品牌。

  2. 了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时,不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色,但这样的颜色却引不起高年龄层的兴趣。

  3. 不要使用过多的颜色。除了黑色和白色以外,约选择四到五个颜色就够了。太多的颜色会导致混淆,也会拉走读者的注意力。

  4. 在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果,也会妨碍观众阅读。白底黑字的阅读效果最好。

  5. 用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候,有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比,你可以建立一个仿真网站,并将它转换成灰阶即可。

  6. 选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场,且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看,你可以使用几十年前的流行色彩,引起人们的怀旧之情。

  7. 选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色,例如标题和超级链接等。

  8. 注意网站色差问题。每一个网站开发人员都知道,即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的 gamma 值,并在不同的作业平台上测试你的色盘。




[!--infotagslink--]

相关文章

  • php漏洞之跨网站请求伪造与防止伪造方法

    今天我来给大家介绍在php中跨网站请求伪造的实现方法与最后我们些常用的防止伪造的具体操作方法,有需要了解的朋友可进入参考。 伪造跨站请求介绍 伪造跨站请求...2016-11-25
  • 如何获取网站icon有哪些可行的方法

    获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
  • 在ASP.NET 2.0中操作数据之七十二:调试存储过程

    在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache,PHP和MySql的环境呢?这样自己可以了解更多知识,说起来也更酷。可也许因为我懒吧,我是那种“既然有现成的,用就是了”的人。君子生非异也,善假于物也。两千年前的荀子就教导我们,要善于利用工具...2014-06-07
  • Node调试工具JSHint的安装及配置教程

    现在我们介绍一种在Node下检查简单错误的JS代码验证工具JSHint。  JSHint的具体介绍参考http://www.jshint.com/about/,说直白点儿,JSHint就是一个检查JS代码规范与否的工具,它可以用来检查任何(包括server端和client端...2014-05-31
  • JavaScrip调试技巧之断点调试

    首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还支持一些更为...2015-10-23
  • idea 无法debug调试的解决方案

    这篇文章主要介绍了idea 无法debug调试的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-09
  • php实现网站留言板功能

    我要实现的就是下图的这种样式,可参考下面这两个网站的留言板,他们的实现原理都是一样的畅言留言板样式:网易跟帖样式:原理 需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、...2015-11-08
  • 网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例

    网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢,许多的朋友都不知道如何让自己的网站广告收效最好了,今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10
  • C#客户端程序Visual Studio远程调试的方法详解

    这篇文章主要给大家介绍了关于C#客户端程序Visual Studio远程调试的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
  • c# 代码调试技巧和如何远程调试

    这篇文章主要介绍了c# 代码调试技巧和如何远程调试,帮助大家更好的理解和使用c#编程语言,感兴趣的朋友可以了解下...2020-12-08
  • 个人站长做网站应该考虑的一些问题

    个人网站建设应该考虑哪些问题呢?这个问题我们先在这里不说,下文会一一列出来,希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长,每个人几乎都拥有一个...2016-10-10
  • Android Studio真机无线连接USB设备调试运行详解流程

    你在Android Studio写app时是否也有想过如果可以不用数据线连接手机调试运行就好了?如果需要取出数据线插接的话我肯定是嫌麻烦的,但是模拟器有时候需要测试一些需要硬件支持的功能时又不管用,所以最好的测试还是在真机上,本篇教你扔掉数据线来无线调试...2021-11-04
  • 分享利用论坛签名提升网站权重

    分享一篇利用论坛签名提升网站权重的方法,在推广中论坛签名也是一种不错的外链推荐的方法,但现在权重越来越低了,有需要的朋友可以看看。 话说有一天在站长网上面看...2016-10-10
  • 解决Visual Studio 2012 Update 4 RC启动调试失败的方案

    这篇文章主要为大家详细介绍了Visual Studio 2012 Update 4 RC启动调试失败的解决方案,感兴趣的小伙伴们可以参考一下...2021-09-22
  • 如何提高网站pv 吸引力

    关于如何提高网站的吸引呢,下面我们列出了5点,让你的网站pv大大的提升哦   1、建立一个清晰的网站地图   一个清晰的网站地图可以给你的用户提供一个简介明了的...2017-07-06
  • 如何有效提高网站的用户回头率

    第一,网站的内容;请各位站长朋友不要一天到晚只想着出什么好的绝招来推广网站,却忽略了网站的内容;其实网站的内容是极为重要的,因为这是你的本,你的根!网站的内容只有不断...2017-07-06
  • 网站排名提升后稳定排名方法

    一、靠前排名成搜索关注的对象   从搜索引擎的角度考虑一下,就不难理解为什么搜索引擎对排名在首页的网站那么慎重,甚至对新进排名在首页的一些网站进行为期一个多月的...2016-10-10
  • pycharm debug 断点调试心得分享

    这篇文章主要介绍了pycharm debug 断点调试心得分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-16
  • 使用idea远程调试jar包的配置过程

    这篇文章主要介绍了使用idea远程调试jar包的配置过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-26