How do I use Chrome Developer debugging shortcuts on a Mac?

It works:

1. Go to System Preferences -> Keyboard -> Keyboard. Make sure you have Enabled Use F1/F2 as standard function keys.

2. Go to System Preferences -> Keyboard -> Keyboard Shortcuts. Choose Mission Control on the left panel, then look to the right panel and disable F11 to Show Desktop.

• Continue: F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms.
• Step over: F10 or Command-' (apostrophe) on Mac or Control-' (apostrophe) on other platforms.
• Step into: F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms.
• Step out: Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on other platforms.
• Next call frame: Control-. (period) on all platforms.
• Previous call frame: Control-, (comma) on all platforms.

Source

This can be accomplished with Karabiner as well. The keymap for a full-sized keyboard looks like:

<?xml version="1.0"?>
<root>
  <appdef>
    <appname>CHROME</appname>
    <equal>com.google.Chrome</equal>
  </appdef>

  <item>
    <name>CHROMEDEBUGGINGKEY</name>
    <appendix>This maps the F13, F14 and F15 keys to Chrome debugging keys</appendix>
    <identifier>private.swap_chrome_to_debug_settings</identifier>
    <only>CHROME</only>
    <!--<autogen>__KeyToKey__ KeyCode::SPACE, KeyCode::TAB</autogen>-->
    <autogen>
      __KeyToKey__
      KeyCode::F13, KeyCode::F8
    </autogen>
    <autogen>
      __KeyToKey__
      KeyCode::F14, KeyCode::F10
    </autogen>
    <autogen>
      __KeyToKey__
      KeyCode::F15, KeyCode::SEMICOLON, ModifierFlag::COMMAND_L
    </autogen>
    <autogen>
      __KeyToKey__
      KeyCode::F16, KeyCode::SEMICOLON, ModifierFlag::COMMAND_L, ModifierFlag::SHIFT_L,
    </autogen>
  </item>
</root>