สำหรับหลายคนที่ต้องทำการ dev ในส่วน Javascript มันคงเป็นเรื่องปวดหัวในวิธีแบบเดิมๆ คือ เปิด Editor แก้ไฟล์ บันทึก แล้วก็กด F5 ซึ่งมันก็เป็นเรื่องปวดหัวอย่างมาก พอบางท่านที่ได้รู้จัก Google Chrome ก็จะค้นพบว่าการ dev มันง่ายขึ้น เพราะ Google Chrome มีความสามารถในการทำ Live edit ได้ คือแก้ปุ๊บแล้วหน้าเว็บจะเปลี่ยนเลย ไม่ต้องกด F5 อีกต่อไป

ถ้าเป็นสมัยก่อนบน IE รุ่นเดอะ เราจะใช้การรัน Javascript บนช่อง Address Bar เพื่อจะทำจะแก้อะไรสักอย่าง แต่มันก็ได้แค่แก้หลังเกิด Event อะไรไปแล้ว ต่างกับ Live edit บน Google Chrome ที่เราแก้ได้แม้กระทั่ง Event ที่ bind ไว้แล้ว

สำหรับคนที่ไม่รู้ความสามารถเหล่านี้เลย ประมาณว่ามันคืออะไร มีด้วยเหรอ แนะนำดูคลิปข้างล่างนี้ ส่วนความสามารถ Live edit มันมีอยู่ในช่วงนาทีที่ 3 ครับ และสามารถทำได้ทั้ง JS และ CSS
[media url=”https://www.youtube.com/watch?v=nOEw9iiopwI” width=”853″ height=”480″]

กลับมาประเด็นของโพสนี้ต่อ คือเมื่อเราใช้ Live edit ได้ แม้จะแก้แบบเราเรียกว่า on the fly แต่เราก็ไม่ได้ fly จริงๆ สักที เพราะเราต้องก็อบ JS ใน Live edit กลับมาแปะลงบน Text editor หรือ IDE แล้วบันทึกจริง ผมเลยเกิดความคิดว่า แล้วมันไม่มีตัวช่วยอะไรที่ช่วยเซฟ JS หรือ CSS ลงเครื่องเราเลยเหรอ? แล้วในที่สุด… (จริงๆ ผมใช้เวลาไม่ถึง 3 นาทีก็เจอเว็บเขาใน Google ล่ะ)

http://tomicloud.com/2012/04/save-css-chrome-ext

วิธีการใช้งานก็ดูตามเว็บเลย คือ ติด Extension จาก Chrome Web Store แล้วปิดเปิด Chrome รอบหนึ่ง แล้วเข้าไป map โดเมนของเรา เช่น localhost เข้ากับโฟลเดอร์ในเครื่องเรา แล้วติดตั้ง Ruby ลงเครื่อง สำหรับคนใช้ Windows ก็แนะนำให้โหลด http://rubyinstaller.org/ มาติดในเครื่อง แล้วตอนติดตั้งอย่าลืมตั้งให้เรียกคำสั่ง ruby ใน cmd ได้ด้วย กับเลือกให้ไฟล์ .rb ทำงานกับ Ruby ด้วย เพราะเวลาเราเปิด server จะได้ทำง่ายๆ ด้วยการดับเบิ้ลคลิก

สุดท้ายดาว์นโหลดไฟล์ server.rb มาลงเครื่อง แล้วเปิดมันทำงานขึ้นมา เมื่อเราแก้ JS CSS ใน Chrome มันจะเซฟลงเครื่องให้อัตโนมัติเลย

ส่วนใครที่คล้ายผม คืออยากแก้แค่ JS แล้ว CSS ไม่อยากยุ่ง กลัวเละ ตอนนี้ตัว Extension ยังไม่มีตัวเลือกให้ตั้งค่าตรงนี้ ก็แนะนำให้เอา server.rb ที่ผมแก้ไปรันแทน แก้ขัดไปก่อน

#!/usr/bin/ruby
# -*- coding: utf-8 -*-

# server.rb: receive CSS and JS files from Chrome extension
#   and save files locally
#
# Author: Tomi.Mickelsson@iki.fi
#   04.02.2012 - Created

require 'webrick'
include WEBrick

class MyServlet < HTTPServlet::AbstractServlet

  def do_POST(req, res)
    url   = req.header['x-origurl']
    fpath = req.header['x-filepath']
    bodylen = req.header['content-length']
    raw = req.body
    fpath = fpath.join("")

    if /\.css$/.match(fpath)
        print "It's CSS. Don't save it."
        res.status = "200"
        res.body = "OK"
        return false
    end

    print url, " -> ", fpath, " ", bodylen, "\n"

    reply = "OK"

    # save file
    begin
        f = File.open(fpath, "wb")
        f.syswrite(raw)
        f.close
    rescue => e
        puts "EXCEP " + e.message
        reply = e.message
    end

    res.status = "200"
    res.body = reply
  end

end

# start server
server = HTTPServer.new(:BindAddress => "localhost",:Port => 8080)
server.mount('/', MyServlet)

trap 'INT' do server.shutdown end

puts "Server running in port 8080..."
server.start

ขอให้มีความสุขกับการแก้บั๊กครับ