2 调 试 脚 本

调 试 脚 本 可 以 使 你 在 把 脚 本 发 行 给 World Wi de Web 万 维 网 之 前 发 现脚 本 中 的 错 误 例 如 语 法 错 误 运 行 期 间 错 误 以 及 逻 辑 错 误 你 大 概 已 经 知 道为 调 试 设 置 断 点 知 道 如 何 一 步 步 通 过 一 行 行 的 脚 本 现 在 你 可 以 看 到 如 何 使用 Visual Int erDev 完 成 这 些 任 务 在 Visual Int erDev 中 你 把 脚 本 放 到 页面 上 进 行 调 试 调 试 脚 本 包 括 下 述 步 骤 或 部 分 步 骤

• 把 客 户 脚 本 加 到 一 个 HTML 页 面 上

• 设 置 断 点

• 一 步 步 通 过 脚 本 的 各 行

• 改 变 变 量 的 值

把 客 户 脚 本 加 到 一 个 HT ML 页 面 上

调 试 客 户 脚 本 是 熟 悉 在 Visual I nterDev 环 境 中 进 行 调 试 的 轻 松 方 式 客户 方 脚 本 在 浏 览 器 中 进 行 处 理 而 服 务 器 方 脚 本 在 Web 服 务 器 中 进 行 处 理 要了 解 客 户 和 服 务 器 脚 本 的 详 细 内 容 参 见 第 二 十 六 章 调 试 页 面 中 的 调 试客 户 脚 本 和 调 试 服 务 器 脚 本 两 节

要 进 行 演 练 你 需 要 创 建 一 个 文 件 其 中 带 有 要 调 试 的 脚 本 有 一 个 样 板

客 户 脚 本 在 下 述 例 子 中 放 到 <SCRIP> 和 </SCRIPT> 两 个 标 记 之 间 以 简 单 格 式设 定 了 长 度 合 适 的 口 令 项 其 余 的 HTML 标 记 定 义 格 式 但 不 特 别 指 定 脚 本 调 试过 程

要 使 用 下 述 脚 本 就 要 建 立 一 个 新 的 .htm 文 件 并 把 HTNML 编 辑 器 转 换 到Source 视 图 中 复 制 脚 本 和 HTML 然 后 单 击 右 键 再 选 择 快 捷 菜 单 中 的 Paste As Text 按 文 本 粘 贴 详 细 内 容 参 见 第 二 十 五 章 用 HTML 元 素 编 写 脚 本

注 意 : JavaScript 区 分 大 小 写 因 而 上 述 样 板 脚 本 出 现 在 你 的 .htm 文 件 中严 格 保 持 原 样

在 用 户 单 击 Submit 提 交 按 钮 时 脚 本 核 实 口 令 长 度 是 否 是 四 个 字 符 或更 多 字 符 脚 本 产 生 一 消 息 框 列 出 用 户 键 入 的 口 令 如 果 口 令 的 长 度 为 四 个字 符 或 更 多 字 符 用 户 便 用 <FORM> 标 记 中 的 Action 元 素 重 新 定 向 到 该 页 面 上

如 果 你 还 没 有 建 立 Process.as p 文 件 便 调 用 格 式 而 且 浏 览 器 将 显 示 对象 没 找 到 错 误 如 果 口 令 长 度 少 于 四 个 字 符 便 出 现 一 个 消 息 框 指 明 要 求多 加 字 符

设 置 断 点

要 在 脚 本 中 指 定 一 个 你 希 望 停 下 来 的 位 置 查 看 一 下 过 程 状 态 这 时 你 就要 使 用 断 点 断 点 是 脚 本 中 的 一 行 你 希 望 应 用 程 序 在 这 里 停 下 来 然 后 你 可以 一 步 一 步 进 行 或 一 步 跨 过 几 行 脚 本 以 便 查 找 差 错 在 Source 视 图 中 断点 在 脚 本 行 的 左 边 显 示 一 个 红 色 八 角 形

注 意 要 在 微 软 Internet E xplorer 中 调 试 客 户 脚 本 必 须 使 用 Internet Explorer 4 . 0 调 试 功 能 必 须 打 开 详 细 信 息 参 见 Internet Explorer 文 档

设 置 断 点

1 . 打 开 .htm 文 件 选 择 Source vie w

1. 把 光 标 放 到 脚 本 中 你 希 望 建 立 断 点 的 行 上3. 在 Debug 菜 单 中 选 择 Insert Bre akpoint 一 个 红 色 八 角 形 出 现 在 脚 本 该 行 在 左 边

注 意 : 你 还 可 以 把 光 标 放 到 脚 本 的 一 行 上 按 F 9 用 这 个 办 法 设 置 或 去 掉

断 点

启 动 调 试 软 件

1 . 在 Project Explorer 中 用 右 键 单 击 .htm 文 件 选 择 Set As Start Page 2. 启 动 Internet E xplorer 4.0 把 .htm 页 面 装 载 到 浏 览 器 中

1. 在

   Visual Int erDev 的 Debug 菜 单 中 选 择 Processes

出 现 Processes 对 话 框

1. 在

   Process 区 域 选 择 Microsoft Internet Explorer 然 后 再 选 择 Attach

在 Debugged P rocesses 区 域 出 现 Microsoft Internet E xolorer 和 你 计算 机 的 名 字

1. 在

   Internet E xplorer 中 键 入 口 令 选 择 Submit 提 交

脚 本 开 始 执 行 直 到 Internet Explorer 遇 到 断 点 为 止 当 Internet Explorer

遇 到 断 点 时 便 停 下 来 在 Souece 视 图 中 显 示 源 脚 本

覆 盖 在 断 点 图 标 上 的 黄 色 箭 头 指 示 调 试 程 序 在 脚 本 的 这 一 行 上 停 下 来详 细 内 容 参 见 第 二 十 六 章 调 试 页 面 中 的 调 试 客 户 脚 本 一 节

• 步 步 通 过 每 行 脚 本

要 一 次 执 行 一 行 脚 本 你 可 以 使 用 Step Info 一 步 步 通 过 每 行 脚 本 之 后你 还 可 以 在 Internet E xplorer 中 浏 览 页 面 查 看 每 个 语 句 的 效 果

步 进 每 行 脚 本

1 . 在 Source 视 图 中 打 开 .htm 文 件 在 下 述 一 行 脚 本 上 设 置 断 点

<FORM NAME= frm 1 METHOD= Post ACTION = Process. asp OnSubmit= return val idatePassword() >

注 意 : 当 你 把 一 个 断 点 放 到 上 述 一 行 HTML 上 实 际 上 你 规 定 了 在 单 击 Submit 按 钮 时 停 止 执 行 脚 本 OnSubmit= return val idatePassword()

1. 启 动 调 试 程 序

2. 键 入 两 个 字 符 的 口 令 选 择 Submit

Internet Explorer 到 达 断 点 转 换 到 Source 视 图 中 出 现 一 个 黄 色 箭 头覆 盖 在 断 点 图 标 上

1. 在 Debug 菜 单 中 选 择 Step Into 然 后 再 选 择 一 次 Step Into

下 面 一 行 脚 本 变 亮

alert( You entere d + password ); 5. 在 Debug 菜 单 中 再 一 次 选 择 Step Into

Internet Explorer 执 行 提 示 脚 本 并 显 示 一 个 消 息 框

6. 选 择 OK

Internet Explorer 到 达 下 一 行 脚 本 转 换 到 Source 视 图 中

你 可 以 继 续 一 步 步 执 行 每 行 脚 本 查 看 在 Internet Explorer 中 执 行 的 结

果

要 使 脚 本 过 程 作 为 一 个 单 元 来 执 行 你 可 以 使 用 Step Over 跨 越 Step Over

允 许 你 跳 过 一 个 过 程 或 函 数 以 及 跳 过 后 边 的 过 程 和 函 数

在 跨 越 一 个 过 程 之 后 你 可 以 通 过 在 Internet Explorer 中 观 察 页 面 的 办法 来 观 察 过 程 的 效 果

跨 越 每 行 脚 本

1 . 在 Source 视 图 中 打 开 .htm 文 件 在 下 述 一 行 脚 本 中 设 置 断 点

<FORM NAME= frm 1 METHOD= Post ACTION = Process.as p OnSubmit= return val idatePassword () >

注 意 : 当 你 把 一 个 断 点 放 到 上 述 一 行 H T M L 上 实 际 上 你 规 定 了 在 单 击 Submit 按 钮 时 脚 本 停 止 执 行 OnSubmit= return val idatePassword()

1. 启 动 调 试 程 序

2. 键 入 三 个 字 符 的 口 令 选 择 Submit

Internet Explorer 到 达 断 点 转 换 到 Source 视 图 出 现 一 个 黄 色 箭 头覆 盖 到 断 点 图 标 上 面

1. 在

   Debug 菜 单 中 选 择 Step Over 5. 在 每 个 提 示 消 息 中 选 择 OK

Internet Explorer 把 下 述 脚 本 作 为 一 个 过 程 单 元 来 执 行

Internet E xplorer 到 达 该 过 程 单 元 后 边 的 一 行 脚 本 转 换 回 Source 视 图要 了 解 详 细 内 容 参 见 第 二 十 六 章 调 试 页 面

改 变 变 量 值

就 像 调 试 那 样 你 可 以 为 你 的 脚 本 分 配 变 量 你 可 以 在 Immediate 窗 口 中改 变 这 些 变 量 值 当 Internet Explorer 到 达 一 个 断 点 并 转 换 到 Source 视 图 时你 就 可 以 改 变 这 些 变 量 值 并 在 Locals 窗 口 中 观 察 结 果

改 变 变 量 值

1 . 在 Source 视 图 中 打 开 .htm 文 件 在 下 述 一 行 脚 本 中 设 置 断 点

<FORM NAME= frm 1 METHOD= Post ACTION = Process.as p OnSUBMIT= return val idatePassword () >

1. 启 动 调 试 程 序

2. 键 入 三 个 字 符 的 口 令 选 择 Submit

Internet Explorer 到 达 一 个 断 点 并 转 换 到 Source 视 图 出 现 一 个 黄色 箭 头 覆 盖 到 断 点 图 标 上 面

1. 在 Visual Int erDev 中 的 Debug 菜 单 中 选 择 Step Into

Locals 窗 口 显 示 你 在 Immediate 窗 口 中 键 入 的 新 变 量 值